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XHTML 的 各 种 标记 是 构成 网 页 结构 和 页 面 内 容 的 基本 元 素 , 能 够 编 
写 出 合理 的 .拥有 良好 结构 并 富有 语义 的 XHTML 文档 是 学 习 XHTML 的 
目标 ;深刻 理解 盒子 模型 和 与 布局 相关 的 浮动 、 清 除 . 定 位 .显示 等 关键 技术 
是 实现 网 页 布局 的 基石 ;CSS 是 呈现 和 实现 页 面 视 觉 效 果 的 技术 ,理解 和 熟 
悉 掌 握 CSS 选择 器 .文本 /字体 样式 .背景 样式 和 列表 样式 是 实践 W3C 标准 
所 倡导 的 内 容 和 表现 分 离 的 最 好 保障 。 本 书 就 是 围绕 这 一 核心 ,从 初学 者 
的 认 知 角度 出 发 ,内 容 深 入 浅 出 ,按照 “知识 点 一 知识 点 应 用 实例 一 自主 训 
练 ” 的 思路 组 织 内 容 , 为 突出 每 次 学 习 的 重点 ,应 用 实例 要 求 明确 并 辅 以 素 
材 ,为 检验 掌握 知识 的 精准 度 , 辅 以 效果 图 ,使 得 每 次 学 习 都 有 体会 和 进步 ， 
循序 渐进 地 完成 由 一 名 CSS 新 手 成 长 为 能 理解 和 熟练 掌握 XHTML 和 CSS 
这 些 Web 关键 技术 的 .可 以 独当一面 的 熟 手 的 晓 变 。 

本 书 主要 内 容 : 第 1 章 主 要 介绍 网 页 、 HTML、XHTML 之 间 的 相互 关 
系 ;第 2 章 主要 介绍 XHTML 的 常用 标记 及 其 应 用 ,强调 XHTML 的 规则 
和 标记 的 语义 ,为 编写 结构 良好 并 富有 语义 的 XHTML 文档 打 基础 ;第 3 章 
主要 介绍 CSS 基础 与 应 用 实例 ,对 选择 器 的 理解 和 各 种 常用 CSS 选择 器 、 对 
层 全 性 的 理解 和 网 页 中 引入 CSS 的 方式 是 重点 ;第 4 章 主要 介绍 盒子 模型 
与 布局 相关 技术 及 应 用 实例 ,对 盒子 模型 以 及 对 与 布局 密切 相关 的 浮动 、 清 
除 、 定 位 ,显示 等 关键 属性 的 理解 和 应 用 是 重点 和 难点 ;第 5 一 7 章 分 别 介绍 
控制 页 面 显示 效果 的 相关 样式 .如 字体 和 文本 样式 及 应 用 实例 .背景 样式 与 
应 用 实例 .列表 样式 及 列表 元 素 应 用 实例 ;第 8 章 主要 介绍 网 站 模板 和 库 的 
创建 及 应 用 ;如 果 说 第 2 章 一 第 8 章 是 从 微观 ,技术 的 层面 向 读者 介绍 与 网 
页 设计 与 制作 相关 的 知识 点 和 技能 .那么 第 9 章 “ 网 站 项 目的 构建 与 运 维 ” 则 
是 从 理念 和 方法 论 的 宏观 角度 向 读者 介绍 网 页 所 归属 的 网 站 必须 考虑 的 方 
方面 面 。 

本 书 特 点 如 下 。 

Q) 按照 "知识 点 一 知识 点 应 用 实例 一 自主 训练 的 思路 组 织 内 容 。 

(2) 实例 精 编 精 选 ,要求 明确 ,实战 性 强 。 

(3) 应 用 实例 和 自主 训练 并 行 并 呼应 , 均 辅 以 素材 ,操作 性 和 针对 性 强 。 

(4) 强调 基本 功 的 训练 ,循序 渐进 培训 读者 手写 CSS 代码 的 能 力 。 

本 书 的 适用 范围 : 适合 作为 高 职高 专 类 院 校 “网 页 设计 与 制作 ”、 
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“DIV 十 CSS” 和 “网 页 前 端 设计 与 制作 ”等 课程 教材 ,也 适合 作为 有 意 从 事 相 关 工 作 人 员 
的 自学 用 书 。 

本 书 由 钟 江 鸿 任 主编 , 姜 青 莲 、 邹 文 杰 任 副 主 编 。 其 中 , 钟 江 鸿 编写 了 第 2 一 8 章 并 统 
稿 , 邹 文 杰 编 写 了 第 9 章 , 姜 春 莲 参与 了 本 书 的 策划 、 第 1 章 的 编写 和 校对 工作 。 由 于 作 
者 水 平 有 限 , 书 中 难免 存在 朴 漏 之 处 , 敬 请 广大 读者 批评 指正 。 作 者 的 联系 邮箱 : 
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对 网 站 的 理解 见仁见智 ,本 书 从 功能 的 角度 将 网 站 理解 为 一 种 在 Internet 上 发 布 信 
息 的 机 制 ,由 一 组 围绕 某 个 特定 主题 或 者 需求 展开 的 Web 页 面 组 成 。 

Web 页 面 简称 为 网 页 或 者 页 面 ,每 个 网 页 的 核心 固然 是 与 主题 相关 的 内 容 , 而 好 的 
内 容 若 辅 以 好 的 结构 和 好 的 呈现 则 可 更 好 地 实现 设计 和 发 布 网 站 的 目的 。 本 书 围绕 从 技 
术 层 面 如 何 按照 XHTML 的 有 效 规则 定义 格式 良好 的 网 页 文档 以 及 对 网 页 实施 有 效 的 
CSS 来 展开 。 

对 任何 一 个 开始 学 习 与 Web 相关 技术 的 人 来 说 ,首先 应 该 知道 一 个 名 为 W3C 的 组 
织 , 因 为 与 Web 相关 的 架构 和 标准 都 是 由 该 组 织 制订 和 发 布 的 。W3C 是 ”World Wide 
Web Consortium” 的 缩写 , 中文 译 为 “万 维 网 联盟 ”, 官 网 是 : http://www. w3. org/。 
W3C 是 由 万 维 网 的 发 明 人 Tim Berners Lee 于 1994 年 10 月 创建 的 会 员 组 织 , 其 会 员 包 
括 : 软件 开发 商 、 内 容 提供 商 \、 企 业 用 户 、 通 信 公 司 ,研究 机 构 、 研 究 实验 室 、 标 准 化 团体 以 
及 政府 , 像 IBM、Microsoft、Google、Apple、Adobe 等 都 是 其 会 员 ; W3C 的 工作 是 对 Web 
进行 标准 化 ,创建 并 维护 WWW 标准 ,使 所 有 的 用 户 ( 不 论 其 文化 教育 背景 .能 力 、 财 力 以 
及 其 身体 残疾 ) 都 能 够 对 Web 加 以 利用 ; W3C 标准 被 称 为 W3C 推荐 (W3C 
Recommendations)。 其 主要 推荐 标准 如 下 。 

(1) W3C 的 HTML, 

(2) W3C XHTML, 

(3) W3C XML, 

(4) W3C CSS, 

(5) W3C XSL, 

(6) W3C XML Schema, 

(7) W3C XQuery. 

(8) W3C DOM, 

(9) W3C SOAP. 

(10) W3C WSDL, 

(11) W3C RDF. 

网 页 主要 由 3 部 分 组 成 , 即 结构 、 表 现 和 行为 .上 述 与 网 页 相关 的 标准 也 可 进行 如 下 
划分 。 

(1) 结构 化 标准 : 主要 包括 HTML、XHTML 和 XML 等 。 
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(2) 表现 标准 : 主要 包括 CSS. 
(3) 行为 标准 : 主要 包括 DOM, 


1.1 HTML 4.01 与 XHTML 


HTML 是 超 文本 标记 语言 Hyper Text Markup Language 的 缩写 , 它 是 Internet 上 
用 于 编写 网 页 的 主要 语言 ,又 称 Web 的 语言 。 

HTML 2.0 是 1996 年 由 Internet 工程 工作 小 组 的 HTML 工作 组 开发 的 。 

HTML 3. 2 作为 W3C 标准 发 布 于 1997 年 1 月 14 日 。HTML 3.2 向 HTML 2.0 
标准 添加 了 被 广泛 运用 的 特性 ,诸如 字体 、 表 格 、applets、 围 绕 图 像 的 文本 流 、 上 标 和 下 
标 等 。 

HTML 4. 0 作为 一 项 W3C 推荐 的 正式 规范 ,发 布 于 1997 年 12 月 18 日 ,于 1999 年 
12 月 推出 修订 版 HTML 4.01。HTML 4.01 是 重要 的 Web 标准 ,实现 网 页 内 容 与 表现 
的 分 离 。 

随即 W3C 解散 了 HTML 工作 组 , 转 而 开发 XHTML ,直到 发 布 XHTML 1. 0 和 
XHTML 2.0 规范 。 由 于 XHTML 2. 0 规范 的 复杂 性 ,长 期 得 不 到 浏览 器 厂商 的 接受 ,以 
至 继续 开发 HTML 的 后 续 版 本 ,终止 XHTML 的 开发 ,重新 启动 HTML 工作 组 ,于 
2008 年 1 月 22 日 发 布 HTML 5 工作 草案 。HTML 5 中 的 新 特性 包括 了 峙 入 音频 、 视 频 
和 图 形 的 功能 ,客户 端 数据 存储 ,以 及 交互 式 文档 ,HTML 5 还 包含 了 更 具 语义 的 新 元 
素 , 如 过 nav 二 二 header 二 二 footer 二 以 及 一 figure 二 等 ,目前 能 解释 HTML 5 的 浏览 器 
有 IE 9 ERE KIRDE 

XHTML 是 可 扩展 的 超 文 本 标记 语言 eXtensible Hyper Text Markup Language 的 
缩写 , 它 是 使 用 可 扩展 的 标识 语言 (eXtensible Markup Language,XML) 对 HTML 4. 01 进行 
重新 表达 ,基于 XML 的 XHTML 和 HTML 的 最 大 区 别 是 按照 实际 的 需要 来 扩展 标签 ,与 
之 关联 的 是 一 个 支持 性 文档 一 一 称 为 文档 类 型 定义 (Document Type Definition,DTD)。 

HTML 4.01 之 所 以 重要 ,另外 一 个 原因 是 XHTML 1.0, 它 于 2000 年 1 月 正式 成 为 
W3C 的 推荐 标准 (Recommendation) 。 

HTML 5 是 下 一 代 的 Web 标准 ,是 在 HTML 4 的 基础 上 按照 最 新 的 Web 标准 进行 
的 优化 ,不 是 XHTML 1.0 或 者 XHTML 1. 1 的 替代 品 , 而 是 HTML 4 的 重要 修订 。 即 
HTML 5 和 XHTML 将 并 存 于 Web。 现 在 按照 XHTML 的 标准 设计 网 页 ,可 以 在 将 来 
更 加 主动 地 进入 HTML 5 的 时 代 。 


1.2 按照 XHTML 标准 编写 网 页 的 特征 


网 页 中 正确 地 编写 XHTML 标记 ,能 够 确保 页 面 在 未 来 数 年 内 仍 可 以 在 主要 的 浏览 
器 中 正确 显示 。 如 果 基 于 有 效 的 XHTML 规则 编写 格式 良好 的 标记 ,而 且 样式 表 也 是 有 
效 的 CSS ,那么 该 网 站 就 是 符合 Web 标准 的 。 
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这 里 的 有 效 是 指 网 页 中 只 使 用 了 DTD 中 定义 的 标签 ,DTD 是 每 个 符合 Web 标准 的 
网 页 在 网 页 的 顶部 , 即 王 HTML 之 标记 的 前 面 通过 DOCTYPE 标签 来 关联 的 。 
格式 良好 是 指 页 面 的 XHTML 代码 结构 按照 以 下 XHTML 编码 规则 编写 。 


1. 声明 DOCTYPE 


该 声明 位 于 网 页 的 项 部, 即 二 HTML> 标 记 的 前 面 。 用 于 告诉 浏览 器 如 何 解释 网 页 
中 的 标记 ,是 包含 HTML, XHTML 还 是 两 者 的 混合 ,常用 的 是 以 下 两 种 情形 。 

情形 1: 过 渡 型 , 即 网 页 中 既 包 含 符合 XHTML 标准 也 包含 不 推荐 使 用 的 HTML 标 
记 , 目 前 大 多 数 网 站 都 使 用 这 种 类 型 ,以 便 原来 的 HTML 代码 与 新 增 的 XHTML 代码 可 
以 共存 。 网 页 文档 开始 的 文档 类 型 (DOCTYPE) 声 明 如 下 : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www. 

w3.org/ TR/html4/loose. dtd> 

情形 2: 严格 型 , 即 所 有 的 标记 都 符合 XHTML 标准 ,网 页 文档 开始 的 文档 类 型 
(DOCTYPE) 声 明 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www. w3. org/ 

TR/xhtml1/DTD/xhtmll-strict. dtd" > 

当 网 页 文档 中 不 包含 DOCTYPE 声明 时 ,就 是 没有 Web 标准 实施 的 网 页 (这 时 浏览 
器 会 进入 一 种 称 为 Quirks 模式 ,相当 于 IE 6 或 者 更 旧 的 版 本 ,其 特点 是 不 会 识别 文档 对 
象 模型 DOM) ,这 是 不 符合 当今 技术 潮流 的 。 

DOCTYPE 标记 在 语法 上 的 特殊 之 处 是 字母 全 部 大 写 , 而 且 无 须 使 用 左 斜 杠 */" 来 
封闭 ,这 个 特点 与 XHTML 规则 是 相悖 的 。 


2. 声明 XML 的 命名 空间 


声明 XML 的 命名 空间 是 通过 给 html 标记 添加 一 个 名 为 xmlns 的 属性 来 完成 的 , 形 
如 : <html xmlns 一 "http://www. w3. org/1999/xhtml" 之 。 用 于 告诉 浏览 器 在 处 理 
XHTML 页 面 时 清楚 相应 的 DTD 中 包含 哪些 已 定义 的 有 效 的 XHTML 标签 , 它 深 埋 在 
W3C 的 服务 器 中 。 

以 上 两 个 规则 说 明 网 页 是 按 当前 Web 标准 编写 的 ,而 且 能 确保 网 页 顺利 地 被 验证 通 
过 ,尽管 删除 这 两 个 规则 网 页 仍 能 被 正常 浏览 ,还 是 强烈 建议 养 成 按 XHTML 规则 编写 
网 页 的 习惯 。 


3. 声明 内 容 类 型 
内 容 类 型 的 声明 为 在 二 head 记 与 二 /head 记 标记 之 间 添 加 以 下 标记 : 


<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 


这 里 的 元 标记 二 meta 记 用 来 说 明文 档 的 类 型 和 页 面 内 容 所 采用 的 语言 。 
图 1-1 对 比 了 没有 遵照 XHTML 规则 和 遵照 了 XHTML 规则 编写 的 页 面 代码 ,留意 
图 中 斜体 文字 。 


WK | XHTML+C55 网 页 设计 与 制作 实例 教程 


<html> 
<head> 
<title> RÆ XHTML 规则 的 页 面 一 /title> 
</head> 
<body> 
二 hl 二 我 的 第 一 个 标题 </hl 二 
二 p> 我 的 第 一 个 段落 一 /p> 
</body> 
</html> 


(a) 没有 遵照 XHTML 规则 的 页 面 代码 


<!DOCTYPE html PUBLIC "—//W3C//DTD XHTML 1.0 Strict//EN" "http://www. w3.org/ 
TR/=zhtml1 /DTD/zhtml1— strict. dtd" > 
<html rmlns= 'http://www. w3 .org/ 1999 /rhtm1"> 
<head> 
<title> REA XHTML # WJ ñ$ gt Ill </title> 
<meta http —equiv= "Content — Type" content = "text/html; charset =utf—8"/> 
</head> 
<body> 
<<hl> 我 的 第 一 个 标题 一 /hl 之 
<p> 我 的 第 一 个 段落 王 /p> 
</body> 
</html> 


(b) 遵照 XHTML 规则 的 页 面 代码 
图 1-1 无 有 XHTML 规则 的 页 面 代码 对 比 


4. 符合 XHTML 标准 的 编写 规则 


在 编写 XHTML 代码 之 前 ,有 必要 了 解 符 合 XHTML 标准 的 编写 规则 。 

D 所 有 的 标签 都 要 封闭 ( 除 DOCTYPE 标记 外 )。 

@ 所 有 的 标记 小 写 ( 除 DOCTYPE 标记 外 ) 。 

@ 标记 的 属性 小 写 ,属性 值 不 能 为 空 ,而 且 属性 值 用 双 引 号 包含 。 

@ 被 注释 的 内 容 用 二 ! -- 和 -- 二 来 包围 。 

© 将 页 面 中 出 现 的 非 标 记 用 的 二 、& 和 二 等 符号 使 用 相应 的 实体 编码 表示 ,如 编码 
“&lt;” 和 *&amp;” 分 别 对 应 "过 ”和 *&”, 其 他 常见 的 还 有 双 引 号 “"”\ 单 引号 *“”、 大 于 号 “二 ”、 
%” 和 *》”, 分 别 对 应 的 实体 编码 为 *&quot;”、*&apos;”、“&-gt;”、“&laquo;” 和 *&raquo;”。 


1.3 浏览 器 与 相关 工具 


当前 主流 的 浏览 器 有 Apple Safari, Mozila Firefox, MS IE Opera, Google Chrome, 
360 和 邀 游 等 ,前 三 种 的 市 场 占有 率 在 90% 以 上 , 除 IE 6.0 外 ,其 余 浏览 器 都 能 严格 遵守 
W3C 推荐 规范 对 CSS 的 支持 ,是 所 谓 的 SCB(Standard Compliant Browser), 

相关 工具 如 下 。 

(1) Firebug: 是 Firefox 浏览 器 的 免费 扩展 ,可 以 在 本 地 验证 网 页 代码 的 正确 性 。 

(2) 网 页 开发 工具 WDT(Web Developer Toolbar): 也 是 Firefox 浏览 器 的 免费 扩 
展 ,可 以 从 各 个 角度 对 网 页 进行 剖析 。 

这 些 工具 可 登录 网 站 http://www. firefox. com. cn 进行 下 载 。 


按照 XHTML 标准 编写 网 页 是 符合 W3C 规范 的 ,但 是 并 没有 改变 HTML 的 本 质 和 
基本 框架 ,而 且 XHTML 沿用 了 HTML 的 大 部 分 标记 ,所 以 其 文件 类 型 仍 是 html 或 者 
htm 的 ; 按照 W3C 所 提倡 的 内 容 与 表现 分 离 的 原则 ,内 容 的 表现 由 CSS 去 实现 ,所 以 和 
之 前 的 HTML 编写 相 比 具有 以 下 两 个 特点 : 一 是 XHTML 去 除了 用 于 实现 内 容 表 现 的 
绝 大 部 分 标记 ,如 二 color 二 一 italic 之 和 一 font 二 等 ,还 可 以 根据 需要 扩展 一 些 更 富 语义 
的 标记 ; 二 是 编码 的 规则 更 加 严格 ,如 要 求 标记 和 属性 名 小 写 , 属 性 值 不 能 为 空 等 。 

HTML 标签 是 用 来 表示 文档 结构 的 ,结构 化 的 文档 是 实现 有 效 CSS 的 基础 ,本 章 重 
点 学 习 利 用 XHTML 标记 编写 结构 化 的 文档 。 

在 开始 学 习 HTML 标记 之 前 , 需 意 识 到 : 浏览 器 对 所 有 标记 都 有 一 个 默认 的 表现 形 
式 (样式 ), 即 所 谓 的 浏览 器 的 内 部 样式 表 , 该 样式 表 中 定义 了 浏览 器 对 每 个 HTML 标记 
都 有 某 些 与 其 关联 的 样式 ,如 字体 大 小 , 行 间距 .颜色 .外 边 距 等 ,不 同 的 浏览 器 其 内 部 的 
样式 表 也 有 所 不 同 , 这 也 是 相同 的 HTML 文档 在 不 同 的 浏览 器 中 显示 效果 不 尽 相 同 的 
原因 。 由 于 某 些 原因 浏览 器 无 法 读 取 用 户 的 自 定义 样式 表 时 ,浏览 器 的 内 部 样式 表 就 会 
成 为 后 备 样式 。 

浏览 器 的 内 部 样式 表 可 以 是 按照 需要 用 CSS 去 替换 的 , 按 需 改变 标记 的 默认 样式 是 
后 续 章 节 的 主要 内 容 , 本 章 的 重点 是 用 合理 的 标记 去 标识 内 容 , 产 生 一 个 格式 好 的 结构 化 
文档 。 


2.1 一 个 简单 的 HTML 实例 


HIF XHTML 要 求 的 DOCTYPE 和 XML 命名 空间 声明 ,本 节 通 过 一 个 最 简单 的 
HTML 实例 来 了 解 网 页 代码 和 网 页 结构 。 利 用 记事 本 创建 一 个 扩展 名 为 . html 的 网 页 
文件 ,图 2-1 是 网 页 编码 和 网 页 浏览 效果 之 间 的 对 比 。 

网 页 代码 的 特点 如 下 。 

(1) 网 页 就 是 HTML 文档 ,对 应 文件 的 扩展 名 是 . htm 或 者 . html, 

(2) 网 页 代码 由 HTML(XHTML) 这 样 的 标记 语言 来 编写 。 

(3) 网 页 的 代码 是 由 浏览 器 来 解释 显示 效果 。 

HTML 标记 的 特点 如 下 。 


<html> 
— AB 
<p> 我 的 第 一 个 段落 </p> 


Pi 我 的 第 一 个 段落 
</html> 
(a) HTML 文 档 (b) 对 应 的 显示 效果 


图 2-1 网 页 编码 与 浏览 效果 的 对 比 


(1) 标记 是 由 尖 括 号 包围 的 关键 词 , 如 二 html ,只 使 用 符合 W3C 规范 的 标记 。 

(2) 标记 通常 成 对 出 现 , 既 有 开始 标记 和 结束 标记 ,如 过 html 之 和 过/html 之 ; 也 有 
少数 的 空 标 记 如 过 br/ 二 和 二 hr/ 二 等 。 

如 图 2-1(a) 文 档 中 出 现 的 4 对 标记 ,其 作用 如 下 。 

(1) 一 html 过 与 二 /html 二 是 文档 为 网 页 的 标志 性 标记 ,不 可 或 缺 。 

(2) 一 body 二 与 一 /body 过 是 显示 网 页 内 容 的 标记 ,不 可 或 缺 。 

(3) 二 hl 之 与 二 /hl 之 是 显示 为 一 级 标题 的 标记 。 

(4) 一 p 二 与 一 /p 二 是 显示 段落 的 标记 。 

提示 : 利用 记事 本 保存 网 页 文件 。 选 择 “ 文 件 ”>“ 另 存 为 ”命令 ,在 弹出 的 如 图 2-2 
所 示 的 “另存 为 "对话 框 中 ,将 “保存 类 型 "设置 为 “所 有 文件 (x. x* )”, 在 “文件 名 ”文本 框 
中 输入 带 扩 展 名 的 文件 名 ,如 “ex2-1. html”, 


ca ， 计算 机 > REE) > + |* EE P 
组 织 ”新 建文 件 夫 =- @ 
š - 名 称 机 
A W 11-12(2) 
_ B 2-a 
as j 12-130) 
EGI D 11-120) 
Ee Ô 2014 春 和 手工 作 备份 
国 x= k 39 文档 
闻 RETE k WDJDownload 
中 =s D 13-140) 
B 10-1 
DEA ro F 
文件 名 (N): ex2-1.htm| ~ 
保存 类 型 (D: [exe C. " 
Opak SAD: [ANSI - [ sro | 取消 


图 2-2 “另存 为 ”对话 框 
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2.2 HTML 元素、 元 素 内 容 及 元 素 属性 


网 页 的 核心 是 与 网 站 主题 相关 的 内 容 , 这 些 传递 信息 的 内 容 可 以 是 文字 、 图 片 和 超 链 
接 等 ,在 网 页 中 这 些 内 容 是 由 不 同 的 标记 来 标示 的 ,这 些 标 记 是 构成 网 页 的 基本 元 素 , 通 
过 本 节 的 学 习 , 可 以 清晰 地 掌握 HTML 元 素 ,元素 内 容 和 元 素 属性 这 些 有 时 让 人 混淆 的 
术语 以 及 厘清 这 三 者 之 间 的 关联 ,为 后 续 各 种 具体 HTML 标记 的 学 习 做 准备 。 表 2-1 列 
举 了 三 个 HTML 元 素 。 


表 2-1 =+ HTML 元 素 


开始 标记 元 素 内 容 结束 标记 
<p> 这 是 一 个 段落 </p> 
<a href= "default. htm" > 首页 </a> 
<br /> 


观察 表 2-1, 进 行 如 下 归纳 。 

(1) HTML 元 素 是 指 包含 开始 标记 、 结 束 标记 以 及 它们 之 间 内 容 的 所 有 文本 。 

(2) 元 素 内 容 是 指 介 于 开始 标记 与 结束 标记 之 间 的 文本 。 没 有 元 素 内 容 的 标记 就 是 
空 标记 , 如 过 br/ 二 ,二 img alt= "南方 的 紫荆 花 " src 一 "紫荆 .jpg" /二 ,按照 XHTML 规 
则 , 空 标记 必须 在 开始 标记 的 结尾 加 上 和 斜 杠 “/”。 

(3) 元 素 属性 是 指 位 于 开始 标记 部 分 、 用 于 提供 与 标记 相关 的 细节 和 额外 信息 或 者 
标定 标记 本 身 的 文本 。 按 照 XHTML 规则 ,元 素 属性 由 小 写 的 属性 名 和 带 双 引号 的 属性 
值 构成 ,如 a 标记 中 的 href 属性 : <a href =" default. htm" > 8 Bí —</a> , MAM 
HTML 元 素 都 支持 id 和 class 属性 。 

这 里 的 HTML 元 素 是 各 种 HTML 标记 的 泛 指 , 刚 接触 新 的 内 容 不 能 罗列 太 多 和 大 
细 分 ,但 也 必须 有 一 个 粗略 的 全 面 认 识 , 这 里 对 HTML 元 素 从 整体 上 增加 下 面 几 点 认 
识 , 在 后 续 的 学 习 中 对 号 入 座 。 

(1) 块 标记 和 行 标记 。 区 分 块 标记 和 行 标记 非常 重要 ,这 是 影响 布局 的 重要 因素 ,也 

块 标 记 是 指 元 素 内 容 另 起 一 行 开始 的 标记 ,如 二 hl 二 、 二 p 宝 和 二 div 二 等 ; 块 标记 预 
先 设 置 了 外 边 距 以 保持 彼此 之 间 的 距离 。 

行 标记 是 指 元 素 内 容 不 男 起 一 行 ,也 没有 外 边 距 , 即 横向 紧 随 前 面 的 标记 内 容 显 示 ， 
只 有 当 页 面 中 没有 足够 的 空间 时 才 会 折 到 下 一 行 显示 ,如 所 a 之 和 所 span> 等 。 

在 后 续 的 章节 会 学 习 到 块 标记 和 行 标记 是 可 以 设置 其 display 样式 进行 转换 的 。 

(2) 标记 的 嵌 套 。 标 记 的 嵌 套 是 HTML 元 素 中 包含 其 他 HTML 元 素 。 大 多 数 
HTML 元 素 是 可 以 嵌 套 的 ,但 是 行 标记 中 不 能 嵌 套 块 标记 。 

(3) 二 html 二 标记 是 根 元 素 ,一 个 网 页 中 有 且 只 能 有 一 个 二 html 二 标记 。 
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2.3 标题 元 素 和 段落 元 素 


231 标题 元 素 


网 页 内 容 包 含 文 字 、 图 片 . 超 链接 、 导 航 栏 和 表单 等 。 给 这 些 内 容 选择 标记 的 原则 是 
基于 内 容 的 功能 或 者 含义 而 不 是 其 表现 。 

写 文章 时 , 先 要 拟 好 大 纲 , 同 样 读 文章 时 首先 要 扫描 标题 ,标题 是 组 织 文档 内 容 的 常 
用 方式 ,有 一 级 标题 ,二 级 标题 等 , 放 在 网 上 去 发 布 的 网 站 ,内 容 为 王 , 其 中 内 容 的 标题 就 
是 “王后 ”了 ,因为 HTML 网 页 中 的 标题 除了 对 内 容 的 提纲 故 领 ,还 有 一 个 重要 的 功能 就 
是 有 助 于 网 页 被 更 多 的 人 访问 到 以 实现 发 布 网 站 的 初衷 ,因为 搜索 引擎 使 用 标题 为 网 页 
的 结构 和 内 容 编制 索引 。 

根据 内 容 的 层次 ,可 以 包含 多 级 标题 ,与 之 对 应 HTML 标记 有 6 组 标题 标记 : 
二 hl 二 ~ 过 h6 放 ,其 中 二 hl 二 用 来 标识 最 重要 的 标题 ,一 h2 二 次 之 。 

图 2-3 是 6 个 标题 标记 与 对 应 的 浏览 效果 。 


<html> PE . 

<body> This is heading 1 
<hl>This is heading 1</h1> ` 

<h2>This is heading 2</h2> This is heading 2 


<h3>This is heading 3</h3> 


<h4>This is heading 4</h4> This is heading 3 
<h5>This is heading 5</h5> This is heading 4 
<h6>This is heading 6</h6> 
</body> This is heading 5 
</html> mea š 

(a) HTML 文 档 (b) 浏览 效果 


图 2-3 各 种 标题 标记 与 浏览 效果 的 对 应 关系 


关于 标题 标记 的 几 点 说 明 如 下 。 

a) 只 能 使 用 和 二 hl 二 一 二 h6 之 这 6 个 既 有 的 标记 。 

(2) 给 具有 标题 作用 的 文字 设置 标题 标记 , 即 给 标题 使 用 标题 标记 ,而 不 是 从 其 外 观 
来 判断 。 

(3) 标题 标记 默认 是 块 标记 。 

(4) 各 级 标题 的 表现 形式 是 由 CSS 来 实现 的 。 

(5) 标题 标记 中 不 能 和 嵌 套 其 他 的 标记 。 


232 段落 元 素 
段落 是 围绕 标记 展开 的 ,内 容 中 的 段落 用 段落 标记 二 p 二 ,图 2-4 是 段落 标记 与 对 应 
的 浏览 效果 。 


关于 段落 二 p 二 标记 的 几 点 说 明 如 下 。 


<html> 
<body> 
<p>This is a paragraph</p> 
<p>This is another This is a paragraph 
paragraph</p> 
</body> This is another paragraph 
</html> 


(a) HTML 文 档 (b) 浏览 结 
图 2-4 段落 标记 与 浏览 效果 的 对 应 关系 


(1) 过 p> 标 记 是 块 标 记 。 

(2) 浏览 器 会 删除 二 p 二 标记 中 多 余 的 空格 和 空 行 , 即 额 外 的 空格 或 空 行 都 自动 减 为 
一 个 空格 。 

G) 若 要 二 p 二 标记 中 的 内 容 换行 ,可 添加 强制 换行 标记 一 br /二 来 实现 。 

图 2-5 是 二 br /二 标记 与 对 应 的 浏览 效果 。 


<html> 
peg break 
<p>To break<br />lines<br /> To dii 

in a<br />paragraph,<br /> lines 

use the br tag. ina 
a paragraph, 
<body> use the br tag. 
</html> 

(a) 带 <br/> 的 HTML 文 档 (b) 浏览 效果 


图 2-5 HTML 的 二 br /二 与 浏览 效果 


233 注释 标记 
将 注释 插入 HTML 代码 中 ,这 样 可 以 提高 代码 的 可 读 性 ,使 代码 更 易 被 人 理解 。 浏 


览 器 会 忽略 注释 ,不 会 显示 它们 。 
HTML 注释 的 语法 是 : <! -- 注 释 内 容 -- 之 。 图 2-6 是 带 HTML 注释 标记 与 对 应 


的 浏览 效果 。 


<html> 
<body> 
<!-- 这 是 一 段 注释 。 注 释 不 会 在 浏览 器 中 显示 。--> 


<p> 这 是 一 段 普 通 的 段落 。 </p> 
</body> 这 是 一 段 普通 的 段落 。 
</html> 

(a) 带 注释 的 HTML 文 档 (b) 浏览 结果 


2-6 HTML 的 注释 元 素 与 浏览 效果 


| Co y | xhTML+C55 网 页 设计 与 制作 实例 元 和 | — — 


2.4 列表 元 素 


人 们 每 天 都 在 不 假 思 索 地 使 用 列表 ,如 购物 清单 ,任务 表 等 ,列表 的 特点 是 简洁 、 一 目 
了 然 。 同 样 网 页 中 的 内 容 也 会 频繁 地 使 用 列表 这 种 方式 ,列表 元 素 不 仅 用 于 分 门 别 类 地 
组 织 信息 发 挥 其 最 基本 的 功能 ; 最 有 意思 的 是 网 页 中 的 导航 栏 和 菜单 其 对 应 的 HTML 
代码 几乎 都 是 列表 元 素 , 所 以 灵活 使 用 列表 元 素 有 助 于 正确 编写 结构 化 HTML 文档 。 

列表 元 素 是 由 多 个 列表 项 组 成 的 ,每 个 列表 项 可 以 是 段落 图片 , 超 链接 以 及 其 他 列 
表 等 。 根 据 所 要 描述 的 内 容 可 选取 不 同 的 列表 元 素 ,HTML 提供 的 列表 元 素 有 : 无 序列 
表 、 有 序列 表 和 定义 列表 。 

不 同 的 浏览 器 显示 的 效果 可 能 不 同 ,但 对 其 显示 效果 的 精确 控制 是 通过 后 续 将 要 学 
习 的 CSS 来 实现 的 。 


241 无 序列 表 


无 序列 表 是 指 列 表 中 的 各 项 在 逻辑 上 没有 先后 顺序 。 无 序列 表 始 于 二 ul 二 标记 。 每 
个 列表 项 始 于 <1i 之 。 图 2-7 说 明了 无 序列 表 标 记 及 其 显示 效果 。 


<html> 
<body> 
<h4> 一 个 无 序列 表 : </h4> 
<ul> 
<li> 咖 啡 <i> 
<li> 茶 <jli> 
<li> 牛 奶 </li> 
</ul> 
</body> 
</html> 


(a) 4f <u> pK IC HIHTML XH (b) 浏览 效果 


图 2-7 HTML 的 无 序列 表 元 素 与 浏览 效果 


242 有 序列 表 


有 序列 表 是 每 个 列表 项 有 顺序 区 分 ,可 以 用 数字 或 者 字母 等 多 种 形式 来 表示 顺序 。 
默认 情形 是 阿拉 伯 数 字 。 有 序列 表 始 于 过 ol 二 标记 。 每 个 列表 项 始 于 一 li 之 。 图 2-8 说 
明了 有 序列 表 标 记 及 其 显示 效果 。 


243 定义 列表 


定义 列表 (Definition List) 用 来 标记 定义 术语 (Definition Term) 和 对 术语 的 描述 或 
者 解释 (Definition Data); 定义 列表 在 每 项 之 前 没有 特殊 的 符号 或 者 编号 。 定 义 列表 始 
于 过 dl 二 标记 ,每 个 列表 项 包含 一 个 始 于 二 dt 二 标记 的 定义 术语 和 一 个 或 者 多 个 始 于 
所 dd> 标 记 的 术语 解释 。 图 2-9 说 明了 定义 列表 标记 及 其 显示 效果 。 


<html> 
<body> 
<h4> 一 个 有 序列 表 : </h4> 
一 个 有 序列 表 : 
<li> 咖 啡 </li> 
<li> 茶 </li> 
<li> 牛 奶 </li> 1. 咖啡 
</ol> 2. 茶 
</body> 3 牛奶 
</html> 
(a) 带 <ol> 标 记 的 HTML 文 档 (b) 浏览 效果 
图 2-8 HTML 的 有 序列 表 元 素 与 浏览 效果 
<html> 
<body> 
<h2> 一 个 定义 列表 : <h2> 
<dl> y . 
<dt>Coffee</dt> 一 个 定义 列表 : 
<dd>Black hot drink</dd> Coffee 
<dt>Milk</dt> Black hot drink 
<dd> White cold drink</dd> Milk 
</dl> White cold drink 
</body> 
</html> 
(a) <d> R ÀCHIHTML CE (b) 浏览 效果 


图 2-9 HTML 的 定义 列表 元 素 与 浏览 效果 


244 列表 的 嵌 套 


列表 是 可 以 髓 套 的 , 即 在 列表 项 中 可 以 包含 列表 ,就 像 主 菜单 下 有 子 菜单 ,图 2-10 呈 
现 了 列表 的 嵌 套 及 其 显示 效果 。 


<html> 
<body> 
<h4> 一 个 柑 套 列表 : </h4> 
<ul> 
<li> 咖 啡 </i> 
<li> 茶 
<ul> 
<li> 红 茶 </li> wa 
<i> <i> NEER : 
</ul> 
<i> 
<li> 牛 奶 </li> -R 
</ul> 
</body> 
</html> 


(a) HTML 文 档 (b) 浏览 效果 
图 2-10 ”列表 元 素 的 嵌 套 与 浏览 效果 


| Ç ; > Í XHTML+[55 网 页 设计 与 制作 实例 教 和 | — — 


不 同 于 段落 和 标题 等 大 部 分 元 素 , 列 表 元 素 是 一 个 复合 元 素 或 者 结构 化 元 素 , 即 列表 
类 元 素 由 两 个 元 素 构成 ,一 是 上 级 列表 类 型 元 素 , 如 ul ol dl 分 别 为 无 序 有 序 和 定义 列 
表 , 二 是 列表 项 元 素 , 如 对 应 的 li、dt/dd。 

关于 列表 元 素 的 其 他 几 点 说 明 如 下 。 

A) ul.ol 和 dl 及 列表 项 元 素 li dt 和 dd 都 是 块 标记 。 

(2) 列表 项 的 内 容 可 以 是 文字 、 图 片 和 超 链接 等 。 

(3) 若 要 改变 ul 和 ol 默认 的 符号 和 标号 的 方式 ,可 以 给 标记 添加 属性 style= " list- 
style-type: 属 性 值 ;" 来 实现 。 对 于 无 序列 表 ul 元 素 , 属 性 list-style-type 的 主要 属性 值 
有 : disc|circle| square|none, 默 认 值 是 disc; 对 于 有 序列 表 ol 元 素 ,属性 list-style-type 
的 主要 属性 值 有 : decimal | lower-alpha | upper-alpha | lower-roman | upper-roman | 
none, 默 认 值 是 decimal; 甚至 可 以 使 用 list-style-type 属性 的 取 值 ,无 序列 表 和 无 序列 表 
可 以 相互 转化 。 

(4) 列表 的 嵌 套 要 注意 其 标记 格式 的 正确 性 。 


2.5 图 像 元 素 


网 页 上 少不了 图 片 ,图 片 的 来 源 可 以 是 照片 .用 图 形 图 像 软件 创作 或 者 来 自 网 络 等 ; 
图 片 的 内 容 可 以 是 人 、 产 品 和 风景 图 片 ,页 面 横幅 或 者 Logo, 用 于 操作 的 按钮 或 者 图 标 、 
背景 等 。 

这 些 图 片 依据 其 功能 可 以 分 为 两 大 类 : 一 类 是 内 容 性 图 片 (如 和 人、 产品 和 风景 图 片 )， 
它 是 网 页 实质 性 内 容 , 若 缺少 它 , 就 会 缺失 内 容 或 者 信息 不 充分 ; 第 二 类 图 片 是 装饰 性 图 
片 , 用 来 加 强 网 页 的 视觉 效果 ,如 按钮 ,图标 和 背景 图 片 等 。 至 于 页 面 横幅 或 者 Logo 既 
可 以 作为 内 容 性 图 片 也 可 作为 装饰 性 图 片 。 

网 页 中 引入 图 片 的 方式 : 内 容 性 图 片 是 使 用 二 img 二 标记 将 图 片 载 和 页面 中 ; 而 装 
饰 性 图 片 是 通过 CSS 来 引入 的 。 本 小 节 主 要 介绍 二 img 二 标记 ,图 2-11 EEA <img> 
标记 的 HTML 文档 及 浏览 效果 。 


<html> 
<body> 
<p> 
- 幅 图 像 : 
<img src="image/InFlower_1001.jpg" 
alt=" 花 " width="128" height="128" /> 
</p> 
</body> 
<html> 一 幅 图 像 : 


(a) 带 <img> 标 记 的 HTML 文 档 (b) 浏览 效果 
图 2-11 HTML 图 像 元 素 与 浏览 效果 


去 img 盖 是 空 标 记 , 即 它 是 没有 元 素 内 容 的 标记 ,在 开始 标记 中 完成 标记 的 闭合 。 图 
像 元 素 的 主要 属性 如 下 。 


(1) src 属性 : JE EH R E h C SJ B) ñ R.K £f iñ f ë , £ <img> bi rh 45 n] sk: 
缺 的 属性 。 

(2) alt 属性 : 指定 图 像 的 替换 文本 ,也 是 一 img> 标 记 中 很 重要 的 属性 。 其 功能 一 是 
在 浏览 器 无 法 正常 载 人 图 像 时 ,浏览 器 将 显示 这 个 蔡 代 文 本 ; 二 是 给 alt 属性 设置 与 网 站 
关键 词 相 关 的 属性 值 , 可 以 提高 网 页 被 检索 到 的 概率 ,这 也 是 搜索 引擎 优化 SEO 的 手段 
之 一 ,所 以 无 论 从 网 页 的 内 容 显 示 还 是 网 页 发 布 角度 来 看 .给 二 img 二 标记 中 添加 alt 属 
性 都 是 必要 的 。 图 2-12 说 明了 alt 属性 的 显示 效果 。 


<html> 
<body> 
<p> 
幅 图 像 : 
<img src="image/InFlower_1001.jpg" 
width="60" height="60" /> 


<p> š 

图 像 不 能 正常 载 和 时 : á 

sing s=" 花 I ame: W 

sre="imagel/InFlower-1001.jpg" width="60" 

height="60" /> x FE 
</body> 
</html> 图 像 不 能 正常 载 入 时 : 

(a) 带 <img> 标 记 的 HTML 文 档 (b) 浏览 效果 


图 2-12 HTML 图 像 元 素 的 alt 属性 与 浏览 效果 


(3) title 属性 : 用 于 描述 图 片 , 仅 在 图 片 正常 显示 时 出 现 。 

(4) width 和 height 属性 : 用 于 设置 图 片 的 显示 尺寸 。 图 2-13 说 明了 这 两 个 属性 的 
效果 。 这 两 个 属性 是 可 选 的 , 若 没有 这 两 个 属性 就 按 图 片 的 原始 尺寸 显示 ; 若 只 设置 其 
中 一 个 ,就 按 原来 的 长 宽 比 显示 。 值 得 注意 的 是 ,浏览 器 在 调整 图 像 大 小 方面 并 不 出 色 ， 
若 要 改变 图 片 的 大 小 ,最 好 用 专业 的 图 像 软件 处 理 。 


<html> 


<body > A 
p Ei 
<img src="image/InFlower_1001.jpg" Z! 


width="60" height="60" > 
<i> 
<img sre="image/InFlower_1001.jpg" 
width="120" height="120" /> 
</body> 
</html> 


(a) HTML 文 档 (b) 浏览 效果 
图 2-13 HTML 图 像 元 素 的 大 小 控制 与 浏览 效果 
关于 图 像 二 img 之 标记 的 几 点 说 明 如 下 。 
(1) <img> PRC EITHR. 
(2) 一 img 之 标记 中 src 和 alt 属性 是 不 可 缺少 的 。 


| < Co [xHTML+css 网 页 设计 与 制作 实例 部 答 ] — — 


(3) <img> PREP src 属性 值 若 使 用 相对 路 径 是 以 一 img 盖 所 在 的 页 面 文件 为 参照 的 。 

(4) 二 img 之 标记 引入 图 片 虽然 是 作为 页 面 的 一 部 分 内 容 显示 ,但 它 是 独立 于 页 面 文 
档 的 图 片 文件 , 即 若 页 面 中 通过 一 img 之 标记 包含 两 幅 图 片 ,就 应 该 有 与 之 对 应 的 两 个 图 
片 文件 ,如 图 2-14(a) 对 应 的 页 面 中 包含 两 个 一 img 二 标记 ,对 应 的 引用 位 置 就 有 相应 的 
独立 于 页 面 的 图 片 文件 ,如 图 2-14(b) 所 示 ,和 否则 浏览 页 面 时 就 不 能 正确 显示 图 片 。 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" 
content="text/html; charset= 简 体 中 文 "> 
<title> 图 片 元 素 </title> 


</head> 
<body> 
<h3> 大 草原 </h3><img src="images/h3_dcy.gif" B O = 4 
alt=" 大 草原 " 户 i 下风 图 2-14. tal 
<h3> 大 九寨 </h3><img sre="images/h3_djz.gif" ‘ O images 
alt=" KALZ" /> D bajz gif 
“body> -[] May. 
</html> 
(a) 包含 两 个 <img> 标 记 的 页 面 (b) 对 应 引用 位 置 的 图 片 文件 


图 2-14 页 面 中 引用 图 片 与 图 片 文件 的 相 呼 应 


(5) IE 6 只 支持 . gif 格式 的 透明 图 片 ,不 支持 . png 格式 的 透明 图 片 。IE 7 以 上 的 版 
本 两 种 格式 均 支 持 。 


2.6 站 点 与 站 点 的 创建 /管理 


BIA <img > PREJA ,就 涉及 在 网 页 文件 中 对 其 他 文件 的 引用 ,下 一 节 中 将 介绍 的 链 
接 元 素 二 a> 更 是 频繁 涉及 对 其 他 文件 (资源 ) 的 引用 ,为 提高 效率 同时 弄 清 楚 文件 之 间 的 
关系 ,在 此 引入 “站 点 ”这 个 概念 。 

一 个 网 站 无 论 内 容 多 么 丰富 ,都 有 一 个 根 目录 ,那么 就 以 这 个 根 目录 来 创建 一 个 站 
点 ,利用 站 点 管理 工具 来 管理 网 站 中 的 所 有 资源 以 及 网 站 的 发 布 等 事项 ,这 些 事 项 小 到 网 
页 的 修改 ,大 到 网 站 的 发 布 .维护 和 更 新 等 ; 在 站 点 管理 工具 这 个 环境 下 ,站 点 的 所 有 资 
源 形成 了 一 个 相互 关联 的 “利益 共同 体 ”, 任 何 一 个 资源 的 变更 都 有 可 能 对 其 他 的 资源 产 
生 影 响 。 网 站 中 的 资源 其 实 都 是 保存 信息 的 文件 , 按 其 表现 形式 可 分 为 网 页 文件 .图片 文 
件 、 模 板 文件 、 库 项 目 文件 .脚本 文件 ,视频 文件 等 ,其 中 网 站 中 用 到 的 颜色 都 是 资源 。 

站 点 是 用 于 管理 网 站 中 各 种 资源 的 一 种 机 制 , 每 个 站 点 都 有 一 个 站 点 名 称 和 对 应 的 
文件 夹 。 网 页 制作 专用 软件 Dreamweaver 提供 了 相关 的 命令 用 于 创建 和 管理 站 点 。 

假设 “D:\ch2” 文 件 夹 是 名 为 “ch2_example” 的 站 点 对 应 的 根 目录 。 利 用 Dreamweaver 
创建 这 个 站 点 的 步骤 如 下 。 

(1) 确定 站 点 名 称 : 启动 Dreamweaver, 选 择 “ 站 点 ”>“ 新 建站 点 ”命令 ,在 如 图 2-15 


所 示 的 “站 点 定义 ”对 话 框 中 “站 点 名 称 ” 文 本 框 中 输入 “ch2_example”。 
(2) 确定 站 点 对 应 的 位 置 : 单 击 “ 本 地 根 文件 夹 "文本 框 后 的 打开 文件 夹 图 标 O ,在 
对 话 框 中 选择 作为 站 点 文件 夹 的 根 目 录 即 可 (如 图 2-15 所 示 的 “D:\ch2\”) ,然后 单 击 “ 确 


本 地 信息 


HARO: TEE 
本 地 根 文件 志 到 ): D:\ch2\ 
默认 图 像 文件 夹 D 
链接 相对 于 : 图 文档 四 ) @ 站 点 根 目录 S) 
MTTP 地 址 QD: http:7/ 


iie i a i 


区 分 大 小 瑟 的 树 接 : 回 使 用 区 分 大 小 写 的 链接 检查 op 
组 存 ; 国 户 用 组 存 E) 


is S 1 i 


图 2-15 “站 点 定义 ”对 话 框 


(3) 切换 到 “文件 ”面板 ,如 图 2-16 所 示 ,这 就 是 所 谓 的 站 点 管理 环境 ,对 站 内 资源 的 
管理 和 上 传 等 事项 都 是 在 该 环境 中 进行 的 。 如 果 要 管理 站 内 的 某 个 文件 /文件 夹 , 则 需 右 
击 该 文件 /文件 夹 , 利 用 如 图 2-17 所 示 的 快捷 菜单 中 的 命令 来 操作 ,这 样 才能 使 资源 之 间 
的 相互 关联 得 以 体现 ,对 于 初学 者 ,很 容易 犯 “在 操作 系统 的 资源 管理 器 环境 下 管理 站 内 


资源 ”的 错误 。 
文件 
B 了 | | 本 地 视图 
GD 名 全 | 日 

日 加 MA- h E:\kenb... 文件 夹 

m-@ m-s 文件 来 
T) index.html 1 HTWL 文档 

m-@ ?age RR 

m Ë images RHR 

5S0 图 2-14 xt 
T) 图 2-14.htnl 1KB HTML 文档 

DD images ZAR 


h3_djz. gif 3KB ACDSee. 
3_dcy gif 2KB ACDSee 


2-16 “文件 ”面板 : 站 点 管理 环境 


corae 
E h _exanple ”| | 本 地 视图 
&c|e e> elm 


E @ 站 点 - ch2_exanple 
B® 图 -19 


T) index. htnl 


图 2-17 利用 快捷 菜单 管理 站 内 文件 /文件 来 
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站 点 的 管理 就 是 站 点 名 站 的 更 改 、 站 点 对 应 位 置 的 更 新 以 及 站 点 的 删除 等 ,可 选择 
“站 点 ”一 “管理 站 点 ”命令 ,在 如 图 2-18 所 示 的 “管理 站 点 ”对 话 框 中 完成 。 


KRW... 
WED.. 


RAUD... 


CEY 
Sto 
SA... 

帮助 


图 2-18 “管理 站 点 "对话 框 


2.7 链接 元 素 


链接 二 a 二 标记 有 “HTML 标记 之 王 ” 的 称号 ,是 构成 网 页 最 核心 的 元 素 ,一 个 网 站 由 
若干 个 内 容 相 关 的 单独 网 页 组 成 ,这 些 单独 的 网 页 在 结构 上 由 二 a 二 标记 链接 联系 起 来 ， 
网 站 和 站 外 资源 也 是 通过 二 a 标记 来 实现 的 ,有 了 二 a 二 标记 就 可 以 将 这 些 网 站 内 外 的 
资源 结 成 一 张 网 ,无 所 不 及 。 

所 请 链接 就 是 指向 某 一 资源 的 路 径 。 一 个 字 , 一 个 词 一 组 词 或 者 一 幅 图 像 都 可 以 作 
为 链接 , 单 击 这 些 链 接 就 跳 转 到 一 个 新 的 资源 或 者 当前 文档 中 的 某 个 位 置 , 当 和 鼠标 指针 移 
动 到 网 页 中 的 某 个 超 链 接 时 ,箭头 会 变 为 手指 状 。 


271 使 用 <a> 标记 链接 到 一 个 新 的 资源 


<a iu fB JI] href 属性 来 指定 链接 的 目标 资源 ,目标 资源 可 以 是 本 网 站 的 资源 ,也 
可 以 是 本 网 站 外 部 的 资源 或 者 邮件 地 址 。 


1. 链接 到 本 网 站 的 资源 


网 站 中 有 许多 文件 .需要 对 文件 进行 分 类 管理 ,如 将 网 站 中 的 内 容 图 片 放 在 images 
文件 夹 中 ,将 样式 文件 放 入 css 文件 夹 等 ,站 内 资源 的 引用 是 使 用 相对 路 径 来 实现 的 , 接 
下 来 以 图 2-19 所 示 的 文件 结构 来 介绍 如 何 引用 站 内 资源 。 

假设 基于 图 2-19 所 示 的 站 点 文件 结构 ,页 面 文件 pl. html 的 浏览 效果 如 图 2-20 所 
示 , 页 面 p2、 图 片 a、 图 片 b 和 首页 对 应 的 文件 分 别 是 图 2-19 文件 结构 中 的 文件 p2. html. 
pic_a. jpg.pic_b. jpg 和 index. html, 


bD mes 链接 到 页 面 p2 
T index.html 
TA er 链接 到 图 片 a 
pic_b. jpe 
T) p2.htnl 
i T) pl. htal 链接 到 图 片 b 
EÉ images 


图 2-19 文件 结构 图 2-20 页 面 pl 的 浏览 效果 


为 实现 上 述 效 果 ,页 面 pl. html 的 代码 如 图 2-21 所 示 。 


<html> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset 一 简体 中 文 "二 
二 title 二 练习 相对 路 径 的 引用 二 /title> 
</head> 
<body> 
<h3><a href="p2. html" >S A il p2 </a> </h3> 
<h3><a href=" ../images/pic_a.jpg"> 链接 到 图 片 a </a> </h3> 
<h3> <a href 一 "pic_b.jpg" 过 链接 到 图 片 b </a></h3> 
<h3><a href=" ../index. html">% A ÄH </a></h3> 
</body> 
</html> 


图 2-21 页 面 文件 pl. html 的 XHTML 代码 


关于 二 a 二 标记 中 href 属性 取 值 的 几 点 说 明 如 下 。 

(1) 文件 夹 之 间或 者 文件 夹 与 文件 之 间 用 左 斜 杠 “/” 分 隔 。 

(2) 双 点 号 “.. ”表示 当前 文档 的 上 一 级 文件 夹 。 

(3) 目标 页 面 不 允许 带 空格 的 文件 名 , 即 养 成 保存 文件 时 ,文件 名 中 不 出 现 空格 的 习惯 。 

(4) 链接 到 本 机 的 绝对 地 址 ,如 “二 a href= "file; ///D/ch2/[8] 2-19/index. html" > 
返回 首页 二 /a> ”仅仅 是 用 于 测试 ,不 能 用 于 网 页 的 发 布 , 而 且 强烈 建议 避免 这 种 情形 ,而 
采用 相对 地 址 。 


2. 链接 到 站 外 资源 

链接 到 站 外 资源 时 ,属性 href 的 值 是 采用 包含 完整 地 址 的 绝对 路 径 , 如 : 
访问 过 a href= "http://www. sdpt. com. cn/"> MER < /a> 

这 行 代码 经 浏览 器 解析 后 显示 为 : 访问 顺德 职 院 。 

3. 链接 到 一 个 E-mail 地 址 

可 表示 为 : 

<a href 一 "mailto:xxx@126.com" 二 邮件 联系 二 /a 二 

这 行 代码 经 浏览 器 解析 后 显示 为 : 邮件 联系 。 

4. 用 “ 井 ?表示 一 个 空 连接 

在 测试 阶段 频繁 使 用 这 种 情形 ,可 表示 为 : 

<a href=" # ">É #</a> 

这 行 代 码 经 浏览 器 解析 后 显示 为 : 联系 。 

5. title 属性 

用 于 设置 链接 文本 或 图 像 的 提示 性 文字 , 即 鼠 标 悬 停 于 链接 时 的 提示 文字 。 
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272 使 用 <a> 标 记 跳 转 到 当前 文档 的 指定 位 置 


当 利 用 二 a 二 标记 通过 链接 指向 当前 文档 的 其 他 一 个 位 置 时 ,需要 在 指定 位 置 利 用 
二 a 二 标记 的 id 属性 定义 一 个 标识 位 置 的 锚 , 然 后 定义 一 个 指向 锚 的 链接 ,这 两 者 之 间 形 
成 一 个 呼应 关系 ,如 : 

<a id="tip" ></a> 4 MAHER ! 

上 述 在 文本 有 用 的 提示 !1” 位 置 之 前 定义 了 一 个 名 为 “tip” 的 锚 , 这 里 仅仅 标识 一 个 
位 置 ,所 以 在 二 a 二 和 二 /a 二 之 间 可 以 没有 文字 。 

与 之 呼应 的 是 : 在 其 他 位 置 定 义 一 个 指向 锚 为 tip 的 链接 ,留意 锚 名 之 前 加 # : 

访问 二 a href="#tip"> 有 用 的 提示 二 /a 

这 样 在 定义 锚 二 a id 二 "tip" 二 和 链接 锚 二 a href 一 "#tip" 过 之 间 就 存在 呼应 关系 , 直 
接 单 击 链接 跳 转 到 锚 名 tip 所 在 的 位 置 ,而 无 须 不 停 地 滚动 页 面 来 寻找 。 

命名 锚 经 常用 于 大 型 文档 开始 位 置 的 目录 , 即 在 每 个 章节 的 起 始 位 置 定 义 一 个 命名 
锚 , 然 后 在 目录 中 定义 指向 这 些 锚 的 链接 ,又 称 导 航 目 录 。 这 类 最 典型 的 应 用 如 百度 百 
科 , 其 中 几乎 每 个 词 条 都 采用 这 样 的 导航 方式 。 

图 2-22 I T <a> PRIE id 属性 和 href 属性 的 呼应 关系 , 当 单 击 浏览 效果 图 的 链接 
“查看 Chapter 3。” 时 ,页 面 就 会 定位 到 显示 Chapter 3 的 位 置 。 

提示 : 若 效果 不 明显 可 以 修改 HTML 代码 ,扩充 页 面 内 容 使 链接 点 和 目标 点 不 在 同 
一 页 面 ; 或 者 通过 拖 动 鼠标 缩小 浏览 器 窗口 以 至 不 显示 Chapter 3, 如 图 2-23 所 示 , 然 后 
再 单 击 查看 Chapter 3。 链 接 。 


<html> 查看 Chapter 3 
<body> 查看 Chapter 3 
<a href="8C3">##k Chapter 3 - </a> Chapter 1 
<h2>Chapter 1</h2> This chapter explains ba bla bla Chapter 1 
<p>This chapter explains ba bla bla</p> 
<h2>Chapter 2</h2> Chapter 2 The chayir plaine ba bli blic 
<p>This chapter explains ba bla bla</p> This chapter explains ba bla bla Chapter 2 
<h2><a id="C3"></a>Chapter 3</h2> h 
<p>This chapter explains ba bla bla</p> Chapter 3 This chapter explains ba bla bla 
<h2>Chapter 4</h2> This chapter explains ba bla bla Chapter 3 
<p>This chapter explains ba bla bla</p> 
</body> Chapter 4 This chapter explains ba bla bla 
</html> Š , 
This chapter explains ba bla bla Chapter 4 
(a) HTML 文 档 (b) 浏览 结果 This chapter explains ba bla bla 
图 2-22 HTML 中 锚 的 定义 与 应 用 示意 图 图 2-23 缩小 浏览 器 


的 窗口 
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利用 二 a 二 标记 跳 转 到 当前 文档 指定 位 置 , 说 明 如 下 。 

(1) 定义 锚 和 链接 锚 都 是 在 同一 个 网 页 文档 。 

(2) 用 id 定义 的 锚 名 只 能 是 以 字母 开头 的 字母 ,数字 或 者 下 划 线 字符 串 。 

(3) 当 href 指向 不 存在 的 锚 名 或 者 缺少 锚 名 前 的 并 时 , 单 击 链接 会 显示 页 面 的 顶部 。 


2.8 表格 元 素 


依据 W3C 的 HTML 4.0.1/XHTML 推荐 标准 ,表格 逐渐 从 网 页 布局 的 角色 退出 ， 
回归 到 表格 本 来 的 功能 , 即 用 于 存放 若干 行 和 若干 列 数据 的 容器 。 

表格 由 一 table> 标 记 来 定义 。 每 个 表格 均 有 若干 行 (由 去 tr 之 标记 定义 ) ,而 每 行 被 
分 割 为 若干 单元 格 ( 由 二 td 二 标记 定义 )。 字 母 td 指 表格 数据 (table data) , 即 数据 单元 格 
的 内 容 。 数 据 单元 格 可 以 包 仿 文本、 图片、 列表 段落、 表单 和 表格 等 。 

每 个 表格 由 table 标记 开始 ,每 个 表格 行 由 tr 标记 开始 ,每 个 表格 数据 由 td 标记 开始 。 


1. 表格 的 创建 与 边框 
图 2-24 和 图 2-25 说 明了 表格 元 素 及 相关 属性 的 应 用 效果 。 


<html> 
<body> 
<h4> 一 列 : </h4> 
<table border="1"> 
<tr> 
<td>100</td> 
</tr> 
</table> 
<h4> 一 行 三 列 : </h4> 
<table border="1"> 


<tr> 
<td>100</td> s. 
<td>200</td> 列 : 
<td>300</td> 
<hr> == 
</table> 100 
<h4> 两 行 三 列 : </h4> 
<table border="1"> _ 
kes 一 行 三 列 ; 
<td>100</td> 
<td>200</td> 
<td>300</td> 100//200|300 
</tr> 
<> 
<td>400</td> — 
<td>500</td> 两 行 三 列 : 
<td>600</td> 
</tr> | 
/able> [100200300 
Ter poolsooleoo 
</html> 
(a) 带 <table> 标 记 的 HTML 文 档 (b) 浏览 效果 


图 2-24 HTML 表格 元 素 及 效果 
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<html> 
<body> 
<h4> 带 有 普通 的 边框 : </h4> 
<table border="1"> 
<tr> 
<td>First</td> 
<td>Row</td> 
<> 
<tr> 
<td>Second</td> 带 有 普通 的 边框 : 
<td>Row</td> 
</tr> 
</table> 
<h4> 带 有 粗 的 边框 : </h4> 
<table border="8"> 


<tr> 
<td>First</td> 
<td>Row</td> 
</tr> 
<tr> 
<td>Second</td> 
<td>Row</td> 
</tr> 
</table> 
</body> 
</html> 
(a) HTML 文 档 (b) 浏览 效果 
图 2-25 不 同 边框 的 HTML 表格 元 素 及 效果 
2. 表格 的 表 头 


表格 的 表 头 使 用 二 th 二 标记 进行 定义 。 图 2-26 显示 了 二 th 之 标记 的 应 用 效果 。 


<html> 
<body> 
<h4> 表 头 : </h4> 
<table border="1"> 
<tr> 
<th> 姓 名 </th> 
<th> 电 话 </th> 
<th> 电 话 </th> 
<h> 
<tr> 
<td>Bill Gates</td> 
<td>555 77 854</td> 
<td>555 77 855</td> 
<hr> = r 
</table> 姓名 电话 电话 
</body> Bill Gates|555 77 854/555 77 855 
</html> 


(a) HTML 文 档 (b) 浏览 效果 
A 2-26 PRAW HTML 表格 元 素 及 效果 


表 头 : 


3. 带 标题 的 表格 


表格 的 标题 使 用 二 caption 之 标记 进行 定义 。 图 2-27 显示 了 到 caption 之 标记 的 应 上 


<html> 
<body> 
<table border="6"> 
<caption> 我 的 标题 </caption> 
<tr> 
<td>100</td> 
<td>200</td> 
</tr> 
<tr> 
<td>400</td> 
<td>500</td> 
</tr> 
</table> 
</body> 
</html> 


(a) HTML 文 档 (b) 浏览 效果 
图 2-27 带 标题 的 HTML 表格 元 素 及 效果 


4. 跨 列 /跨行 的 表格 单元 格 


效果 。 


单元 格 的 跨 列 是 通过 设置 二 th> 或 者 过 td 标记 中 的 colspan 属性 实现 的 ,同样 单元 
格 的 跨行 是 通过 设置 二 th> 或 者 二 td 二 标记 中 的 rowspan 属性 实现 的 。 图 2-28 和 


图 2-29 分 别 呈 现 了 colspan 和 rowspan 属性 的 应 用 效果 。 


<html> 
<body> 
<h4> 横 跨 两 列 的 单元 格 : </h4> 
<table border="1"> 
<tr> 
<th> 姓 名 </th> 
<th colspan="2"> 电 话 </th> 
</tr> 
<tr> 


<td>Bill Gates</td> 
<td>555 77 854</td> 
<td>555 77 855</td> 横 跨 两 列 的 单元 格 : 


<h> 
</table> 

</body> = 姓名 电话 

</html> Bill Gates|555 77 854|555 77 855 


(a) HTML 文 档 (b) 浏览 效果 
图 2-28 表格 单元 格 跨 列 示 意图 
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<html> 
<body> 
<h4> 横 跨 两 行 的 单元 格 : </h4> 
<table border="1"> 
<tr> 
<th> 姓 名 </th> 
<td>Bill Gates</td> 
<h> 
<tr> 
<th rowspan="2"> 电 话 </th> 横 跨 两 行 的 单元 格 : 
<td>555 77 854</td> 
<h> 


<> 姓名 Bill Gates 


<td>555 77 855</td> 
De 电话 55 77 854 
<hable> 555 77 855 
</body> 
</html> 


(a) HTML 文 档 (b) 浏览 效果 
图 2-29 表格 单元 格 跨行 示意 图 


2.9 表单 与 输入 元 素 


表单 元 素 用 来 收集 用 户 信息 ,帮助 用 户 进行 功能 性 控制 ; 表单 是 实现 浏览 者 与 网 站 
进行 交互 的 界面 ,这 部 分 功能 主要 由 网 站 的 后 台 开 发 者 来 实现 。 

构成 表单 的 基本 元 素 ( 又 称 控件 ) 有 : 用 于 输入 文本 的 文本 框 控件 .用 于 选择 的 选项 / 
列表 类 和 用 于 确认 的 按钮 控件 。 

图 2-30 呈现 了 一 个 用 于 输入 用 户 名 和 密码 的 简单 表单 。 


<html> 
<body> 
<form> 
用 户 名 : 
<input type="text" name="user"> 
<br/> 
密码 : 
<input type="password" name="password"> 
</form> 
</body> 用 户 名 : 
</html> 密码 : 


(a) HTML 文 档 (b) 浏览 效果 
图 2-30” 含 两 个 文本 框 的 表单 
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291 表单 元 素 


HTML 中 用 过 form> 标 记 来 定义 , 它 是 一 个 容器 ,其 中 包含 用 来 输入 、 选 择 和 确认 的 
其 他 子 元 素 。 例 如 ,图 2-30(a) 的 二 form 之 和 < /form> 之 间 含 有 两 个 用 来 输入 的 文本 框 
元 素 。 

292 输入 元 素 

多 数 情况 下 包含 在 表单 标记 中 的 是 输入 标记 过 input 之 ,由 输入 标记 的 type 属性 定 
义 具有 的 元 素 类 型 如 表 2-2 所 示 。 

表 2-2 <input 二 标记 type 属性 具有 不 同 值 的 元 素 类 型 一 览 表 


<input> pR 描 述 
<input type="button "> 创建 一 个 可 编程 的 命令 按钮 
<input type="submit "> 创建 一 个 submit 按钮 
<input type= "reset"> 创建 一 个 reset 按钮 
<input type="text "> 创建 一 个 输入 普通 文本 的 文本 框 
<input type="password "> 创建 一 个 输入 密码 的 文本 框 
<input type= "file "> 创建 一 个 上 传 文件 的 文本 框 
<input type= "image "> 根据 图 像 创建 一 个 submit 按钮 
<input type="radio "> 创建 一 个 单 选 按钮 
<input type= "checkbox "> 创建 一 个 复 选 框 


文本 框 的 默认 宽度 是 20 个 字符 ,可 以 通过 size 属性 来 设置 其 字符 个 数 。 二 input 二 
标记 的 另外 两 个 常用 属性 如 下 。 

(1) name 属性 : 用 于 定义 input 元 素 的 名 称 。 

(2) value 属性 : 用 于 确定 input 元 素 的 初 值 。 

当 用 户 需 要 从 若干 给 定 的 选项 中 选取 其 一 时 ,就 会 用 到 单 选 按钮 ,注意 同 组 的 单 选 按 
钮 ,其 name 属性 必须 同名 ,可 设置 checked= "checked" 来 预选 ,代码 如 图 2-31 所 示 。 


<html> 


<input type="radio" checked="checked" 
name="Sex" value="male" /> 
<br/> 
女性 : 
<input type="radio" name="Sex" 
value="female" /> 


</form> 
</body> 男性 : ° 
</html> 女性 : @ 


(a) HTML 文 档 (b) 浏览 效果 
图 2-31 HTML 单 选 按钮 及 其 属性 效果 


| a Q y [ *ura.rssmmiusSsan sms] — — 


当 用 户 需要 从 若干 给 定 的 选择 中 选取 一 个 或 若干 选项 时 ,就 会 用 到 复 选 框 ,同样 可 设 
置 checked 王 "checked" 来 预选 ,如 图 2-32 所 示 。 


<html> 
<body> 
<form> 
我 喜欢 自行 车 : 
<input type="checkbox" name="Bike" 
checked="checked" ><br /> 
我 喜欢 汽车 : 


<input type="checkbox" name="Car" 


e E > 我 喜欢 自行 车 : 回 
可 欢 泊 本 ， 网 
Teds 我 喜欢 汽车 : 
</html> 
(a) HTML 文 档 (b) 浏览 效果 


图 2-32 HTML 复 选 框 及 其 属性 效果 


图 2-33 显示 了 type 属性 为 reset 的 input 元 素 , 即 复位 按钮 的 代码 和 效果 , 单 击 
reset 按钮 即 可 清除 文本 框 中 输入 的 内 容 。 


<html> 
<body> 
<form > 
<p>First name: <input type="text" 
name="fhame" /></p> 
<p>Last name: <input type="text" 


name="lname" /></p> First 
<input type="reset" value="reset" /> ust name; 
</form> 
</body> Last name: 
</html> 
(a) HTML 文 档 (b) 浏览 效果 


图 2-33 HTML 的 reset 按钮 及 其 属性 效果 


293 列表 框 元 素 


HTML 的 列表 框 元 素 用 二 select 二 标记 来 定义 ,在 二 select 二 和 二/select 二 之 间 用 
< 一 option 过 来 定义 各 个 列表 项 ,通过 设置 二 option 之 标记 中 的 selected 属性 来 设置 预选 
项 。 图 2-34 说 明了 列表 框 元 素 及 其 显示 效果 。 


294 多 行文 本 框 


若 需 要 通过 文本 框 输入 多 行内 容 , 可 使 用 多 行文 本 框 二 textarea 记 标记 , 它 通过 属性 


rows 和 cols 来 确定 文本 框 的 行 数 和 每 行 的 字符 数 。 图 2-35 说 明了 多 行文 本 框 元 素 及 其 
显示 效果 。 


<html> 
<body> 
<form> 
<select name="cars"> 
<option value="saab" >Saab</option> 
<option value="Volvo" selected=” "selected"> 
Volvo</option> 
<option value="fiat">Fiat</option> 
<option value="audi">Audi</option> 


</select> 
</form> 
</body> 
Bi Volvo ~ | 
(a) 带 <select> 标 记 的 HTML 文 档 (b) 浏览 效果 


图 2-34 HTML 的 列表 框 元 素 及 浏览 效果 


<html> 
<body> 
<form> 


多 行文 本 框 : 


<textarea rows="4" cols="20"> 
</textarea> 
</form> 
</body> 
</html> 


(a) 带 <textarea> 标 记 的 HTML 文 档 (b) 浏览 效果 
图 2-35 HTML 的 多 行文 本 框 元 素 及 浏览 效果 


Today is Sunday, x 
T'a very busy now. 


多 行文 本 框 ; > 


295 fidd 元 素 


fieldset 元 素 和 legend 元 素 一 般配 合 使 用 产生 一 个 带 标题 的 框 , 框 标题 在 二 legend 二 
标记 和 二 /legend 二 标记 之 间 定 义 。 图 2-36 说 明了 fieldset 元 素 及 其 显示 效果 。 


<html> 

<body> 
<fieldset> 
<legend> 健 康信 和 
<form> 
身高 : <input type="text" /> 
体重 : <input type="text" /> 
</form> 
</fieldset> 

</body> 

<html> 


: </legend> 


(a) 带 <fieldset> 和 <legend> 标 记 的 HTML 文 档 


健康 信息 : 
身高 : 体重 : 


(b) 浏览 效果 
图 2-36 HTML 的 fieldset 元 素 及 浏览 效果 
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296 标签 元 素 


<label >R H input 元 素 定义 标注 (标记 ) ,是 最 简单 的 HTML JER. label 元 素 
不 会 向 用 户 旦 现任 何 特 殊 效果 ,但 它 为 鼠标 用 户 改 进 了 可 用 性 。 即 当 用 户 将 鼠标 移 至 
label 元 素 时 ,浏览 器 就 会 自动 将 焦点 转 到 与 该 label 元 素 相关 的 表单 控件 上 。 前 提 是 
<label > PRIC HY for 属性 与 相关 元 素 的 id 属性 相同 。 图 2-37 说 明了 label 元 素 通过 for 
属性 与 其 他 控件 的 关联 。 


<html> 

<body> 
<form> 
<label for="male">Male</label> 
<input type="radio" name="sex" 
id="male" /> 
<br/> 
<label for="female">Female</label> 
<input type="radio" name="sex" 
id="female" /> 


Dci Male © 

Ot 

i Female © 
(a) 带 <label> 标 记 的 HTML 文 档 (b) 浏览 效果 


图 2-37 label 元 素 通过 for 属性 与 其 他 控件 的 关联 


去 form> 元 素 是 块 级 元 素 , 而 诸如 文本 框 、 复 选 框 , 单 选 按钮 .提交 按钮 等 input 元 素 
以 及 textarea \fieldset 和 label 元 素 都 是 行内 元 素 。 本 小 节 只 是 从 标签 的 角度 了 解 表单 元 
素 , 如 何 应 用 和 激活 这 些 控件 以 真正 实现 表单 的 数据 提取 和 交互 功能 需要 编写 脚本 程序 ， 
相关 的 知识 请 查阅 其 他 资料 。 


2.10 div TF span 元 素 


每 个 XHTML 元 素 都 有 语义 ,如 二 hl 二 一 一 h6 二 用 来 标识 网 页 文档 的 各 级 标题 、 
二 p 记 用 于 标识 段落 和 二 a 二 用 于 表示 超 链接 等 ,车 找 不 到 合适 的 用 于 描述 内 容 的 标签 时 ， 
就 可 使 用 div 或 者 span 元 素 , 这 两 个 元 素 在 网 页 代码 的 使 用 频率 是 比较 高 的 ,特别 是 div 
元 素 , 以 至 很 多 资料 的 封面 常会 出 现 div 的 字眼 。div, 可 以 夸张 一 点 地 说 , 它 是 一 个 可 包 
容 一 切 的 块 元 素 ,span 是 常用 来 标识 文字 的 行内 元 素 。 


2101 dv 元 素 


div 元 素 用 于 组 织 页 面 内 容 , 合 理 地 应 用 div 元 素 可 让 页 面 内 容 在 逻辑 上 更 加 清晰 ， 
使 得 文档 井井有条 ; 除 此 之 外 div 元 素 的 应 用 还 可 以 使 文档 更 加 易于 应 用 样式 ,这 点 随 
着 后 续 章 节 的 学 习 会 有 很 深 的 体会 。 


[第 2 章 XHTML 标记 与 话 用 实例 ] 


下 面 以 图 2-38 所 示 的 页 面 来 说 明 div 是 如 何 组 织 页 面 元 素 的 , 绝 大 多 数 页 面 都 包含 
页 眉 区 内容 区 和 页 脚 区 这 三 个 部 分 。 


sememamaem 


Shunde Polytechnic 


*+smeErSs (MEEFSCEISFN) e#E++TISSKEER+XrPm+ST2OlSSSS 
ase IISRAAPLAT NRAN HEOR SK RLN pam. R] 
|| smaswesumase. 


g SFFTEISFRFARRISA, RAEFPEE2A. BERENA 537.1%: PEREO 
||| A 555%: 845A. W+46A. 585.5%. 2ETU2EMFE22A. F: 
SFNCEIEFRANERELNLF. QABOLRE. Semt. HANNESAR, HE 

- || sasusasruaca. massmazuma wnat). sanapans. Arat. CAL QG aa: 

FAR. 6xXnnsm+. HAENOANE. KARRIER, SFEEISHR (was) 专业 | < 一 为 容 区 
-||| aszasnozamasanaqannmən. emenans esanums. DALF, AOR 

*. *memunskusnpsaspanasa, MATIZAR: 网 络 管理 、 现 直 开交 导数 交 
-||| s. werasga sxmess manerecac. UNUX MuGe2m Sms. HANE 
RFRNRNER. pumapa. Qimastsu. QI. qT5k. SILFF. QT. qr 右 侧 信息 
| 2 o. azat 2 . tem. esa. PLR. gu. Set+ERut. aent. 智信 H Fi 人 


左 侧 导航 |> 


||| assas. kazat. #msnunqwssz s+s8suEDm+. s5s+=sraa 
等 。 En. £T5SGETSSESR2. V2. Wq. SE. KI, SE. AENT. GEMS. € 
Le. Wuasusek 


a 守 企 业 合作 建立 了 区 十 个 校外 实 训 天 过 
FINSE, Fast ETISZSEERSEERSES3( SURAREN] ENAARAEA 


-||| mez258amaim. saegzacm EADROSNFNASEIS COMEFARTEIA, 在 
LERENRDT. SFNOEITNPRSXTSN, EKERLAFLNNEERRŽEMUFSE 
arsees. 


页 脚 区 


图 2-38 页面 构 成 图 


(1) 页 眉 区 : 根据 图 2-38 的 效果 ,其 中 的 元 素 可 以 是 一 幅 图 片 或 者 h2 标题 ,从 提高 
页 面 在 搜索 引擎 中 排名 的 角度 来 看 ,选择 h2 标题 .并 且 用 一 个 div 来 组 织 这 个 h2 标题 ， 
使 之 形成 一 个 相对 独立 的 区 域 ( 也 便于 页 面 的 改版 ) ,所 以 页 眉 区 参考 的 XHTML 代码 如 
图 2-39 所 示 ,其 中 的 id 属性 用 于 以 后 添加 CSS 样式 。 


<div id="header" 二 ”二 !-- 页 眉 区 开始 --> 
<h2><a href=" # "> 88 IR ERF Bš </a></h2> 
</div> 二 !-- 页 眉 区 结束 --> 


图 2-39 页 眉 区 的 参考 代码 


D ARK: 该 区 又 细 分 为 左 侧 导航 和 右 侧 信息 两 部 分 。 

O 左 侧 导航 部 分 : 可 用 一 个 p 元 素 和 ul 元 素来 标识 内 容 , 然 后 用 一 个 div 元 素 组 
织 这 两 个 元 素 形成 一 个 相对 独立 的 区 域 , 左 侧 导航 区 参考 的 XHTML 代码 如 图 2-40 
所 示 。 

© 右 侧 信息 部 分 : 可 用 一 个 h3 元 素 和 4 个 p 元 素来 标识 内 容 , 然 后 用 一 个 div 元 素 
组 织 这 些 元 素 形 成 一 个 相对 独立 的 区 域 , 右 侧 信息 区 参考 的 XHTML 代码 如 图 2-41 
所 示 。 

© 内 容 区 : 用 一 个 div 组 织 左 侧 导 航 和 右 侧 信息 这 两 部 分 形成 页 面 的 内 容 区 ,参考 
的 XHTML 代码 如 图 2-42 所 示 。 
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<div id="sider"> 雪上-- 左 侧 导航 区 开始 --> 
一 p> 下 属 二 级 院 .部 一 /p> 
<ul> 
<li> <a href=" # ">+ 5 fë 8 TRF Ea ></i> 
<li><a href=" # ">#UB S Bš</a></li> 
<li> <a href=" # "> BHF R </a></li> 
<li><a href=" # "> Hk T£ At Bš</a></li> 
<li><a href=" # ">Z ERF E< ></i> 
<li><a href=" # ">W SE RF Bš </a></li> 
<li><a href=" # "> EH TEF Dš </a></li> 
<li><a href=" # "> AXHA HA BE </a> </li> 
<li><a href=" # "> #HB2#B& </a></li> 
<li><a href=" # ">H # A F </a> </li> 
<li><a href=" # "> BEBAR F E</a> </li> 
</ul> 
</div> 二 !-- 左 侧 导 航 区 结束 --> 


图 2-40 左 侧 导航 区 的 参考 代码 


<div id= "content" 二 “二 !-- 右 侧 信息 区 开始 --> 

二 h3 二 电子 与 信息 工程 学 院 一 /h3 二 

一 p 电 子 与 信息 工程 系 (简称 电子 与 信息 工程 学 院 ) 由 原 电子 工程 系 和 原 计算 机 技术 系 于 2010 年 
9 月 合并 组 建 ,是 中 央 财政 支持 建设 的 职业 教育 实 训 大 基地 的 “计算 机 应 用 与 软件 技术 实 训 基 地 ”建设 单 
位 ,广东 省 示范 性 软件 学 院 建设 单位 。<=/p 二 

二 p 二 电子 与 信息 工程 学 院 现 有 教 职 工 86 人 …… 平 均 就 业 率 在 99% E. </p> 

二 p>> 电 子 与 信息 工程 学 院 共有 智能 家 电 与 电子 …… 顺 德 移动 等 企业 合作 建立 了 数 十 个 校外 实 训 基 
地 。 </p> 

一 p> 到 目前 为 止 ,电子 与 信息 工程 学 院 已 获 国家 级 精品 课程 3 门 …… 多 次 在 全 国 、 省 和 学 院 各 级 专 
业 技能 比赛 和 大 学 生 挑 战 杯 等 比赛 中 喜 获 佳绩 。 到 /p> 

</div> 二 !-- 右 侧 信息 区 结束 --> 


图 2-41 右 侧 信息 区 的 参考 代码 


<div id="main" 盖 ”二 !-- 内 容 区 开始 --> 
<div id= "sider"> 二!-- 左 侧 导 航 区 开始 --> 
<p> F 8 —#% </p> 
<ul>.. </ul> 
</div> 二 !-- 左 侧 导 航 区 结束 --> 
<div id="content"> ”二 !-- 右 侧 信息 区 开始 --> 
<h3> + 5548 8 T gS Bš </h3— 
<g> p> 
<p>.. </p> 
E /p> 
<p>.. </p> 
</div> 去 !-- 右 侧 信息 区 结束 --> 
二 /div> 二 !-- 内 容 区 结束 --> 


图 2-42 内容 区 参考 代码 


(3) 页 脚 区 : 该 区 选择 一 个 p 元 素 . 并 用 一 个 div 来 组 织 这 个 p 元 素 ,形成 一 个 相对 
独立 的 区 域 ,所 以 页 脚 区 参考 的 XHTML 代码 如 图 2-43 所 示 。 
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<div id="footer"> 二!-- 页 脚 区 结束 --> 
<p>ABC 工作 室 版 权 所 有 Copyright &copy; 2014 ABC Studio All 
Rights Reserved. 
</p> 
</div> 二 !-- 页 脚 区 结束 --> 


图 2-43 页 脚 区 参考 代码 


至 此 图 2-38 所 示 页 面 的 代码 编写 完毕 ,但 在 实际 应 用 中 为 了 便于 控制 页 面 的 整体 宽 
度 和 对 齐 , 也 为 了 更 简洁 地 “书写 ”页面 的 CSS, 通 常 将 页 面 看 成 一 个 div, 即 再 用 一 个 div 
元 素来 组 织 页 眉 区 、 内 容 区 和 页 脚 区 使 之 形成 一 个 页 面 整 体 ,页 面 的 参考 代码 如 图 2-44 


所 示 。 


<div id="wrapper" 之 “二 !-- 页 面 开 始 --> 
<div id= "header"> 二!-- 页 眉 区 开始 --> 
<h2><a href=" # ">Ë WR pr £ tS Bš —/a></h2> 
</div> 二 !-- 页 眉 区 结束 --> 
<div id="main"> 二!-- 内 容 区 开始 --> 
<div id="sider"> 二 !-- 左 侧 导 航 区 开始 --> 
一 p> 下 属 二 级 院 B< /p> 
<ul>. </ul> 
</div> 二 !-- 左 侧 导 航 区 结束 --> 
<div id="content"> 二!-- 右 侧 信息 区 开始 --> 
二 h3 二 电子 与 信息 工程 学 院 <</h3 二 
<p>.. </p> 
<p>. </p> 
</div> 二 !-- 右 侧 信息 区 结束 --> 
</div> 二 !-- 内 容 区 结束 --> 
<div id 二 "footer" ”二 !-- 页 脚 区 结束 --> 
<p> ABC 工作 室 版 权 所 有 -</p> 
</div> 二 !-- 页 脚 区 结束 --> 
</div> 二 !-- 页 面 结束 --> 


图 2-44 页 面 参 考 代 码 


基于 图 2-44 页 面 代码 的 组 织 结构 图 如 图 2-45 所 示 。 


div#wrapper 
] 
div#header| div#main div#footer 
[ 
h2 div#sider div#content p 
[ | ] 
p ul h3 | p xs p 


图 2-45 页 面 代码 的 组 织 结构 图 


需要 说 明 的 是 : 应 避免 过 度 使 用 div 元 素 , 适 量 而 合理 的 使 用 可 明显 增强 文档 的 结 


构 性 。 
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2102 span 元 素 


"48 t rB ng 36 rs J]<h1l2>— </h6>.<p>.<ul>.<ol>.<dl>ik—<a > 
等 标记 都 不 合适 时 ,可 考虑 采用 span 元 素 ,span 元 素 是 一 个 行内 元 素 , 所 以 二 span 之 和 
</span> Z BJ ( Bl] span 元 素 的 内 容 ) 只 能 是 文字 或 其 他 的 行内 元 素 。 

使 用 span 元 素 时 常常 需要 属性 id 或 者 class 的 配合 来 确定 其 位 置 以 方便 为 其 设置 
CSS 样式 (这 部 分 内 容 将 在 下 一 章 中 学 习 ) ,这 里 只 需 了 解 span 元 素 的 功能 , 即 span 元 素 
可 以 非常 灵活 地 用 于 组 织 或 者 标识 局 部 的 文本 块 ,而 且 常 常 需要 添加 id 或 者 class 属性 ， 
如 图 2-46 中 的 文本 “inevitable” 和 “optional” 就 可 以 利用 span 标记 和 其 属性 class 的 配合 
来 实现 不 同 的 表现 效果 (如 何 利用 CSS 实现 表现 效果 将 在 下 一 章 中 学 习 )。 


<body> 
<p> Pain is <span class= "f1" >inevitable </span> 
Suffering is <span class="f2">optional </span> 
</p> 
</body> 


Æ 2-46 用 span 来 标识 局 部 的 文本 块 


头 元 素 是 HTML 文档 的 重要 组 成 部 分 ,主要 定义 关于 文档 的 概要 信息 , 它 是 由 
过 head 标记 定义 的 ,一 个 完整 的 HTML 文档 结果 如 下 。 


<html> 
<head> 
<!-- 定义 关于 文档 的 概要 信息 -- 之 
</head> 
<body> 
<!-- ER 5 09 iF X--> 
</body> 
</html> 


SF <head> #ll </head> 2 lš] HY k 3 # 4 AER A 9k W| A AR RKG. ARE 
HTML 标准 , 仅 有 几 个 标记 可 以 作为 头 元 素 的 内 容 ,它们 是 : <base>,<link>, <meta>, 
<title 二 一 style 二 和 二 script 二 ,其 功能 描述 如 表 2-3 所 示 。 


R23 头 元 素 中 主要 标记 一 览 表 


标 记 功能 描述 标 记 功能 描述 
<title> 定义 文档 标题 <style> 定义 样式 
<link> 定义 资源 引用 <script> 定义 脚本 
<meta> 定义 元 信息 


说 明 : KHF 3J <title>, <meta>,<link> f <style> it , <script > 46 £ 
后 续 相 关 的 专业 课程 中 学 习 , 有 兴趣 的 同学 可 自行 查阅 资料 。 

1. 文档 标题 元 素 title 

title 元 素 的 内 容 出 现在 显示 页 面 顶部 的 标题 栏 中 或 收藏 页 面 的 默认 名 称 ,具体 内 容 
应 以 精练 概述 网 页 的 内 容 , 而 不 是 泛泛 的 欢迎 词语 ,更 不 可 或 缺 ,因为 搜索 引擎 对 title 元 
素 中 包含 的 关键 词 特别 感 兴趣 ,好 的 title 元 素 内 容 可 提高 页 面 在 搜索 引擎 中 的 排名 ,所 
以 网 站 中 的 每 个 页 面 都 应 有 一 个 唯一 的 title 元 素 。 


2. 元 元 素 meta 


元 元 素 提供 有 关 页 面 的 元 信息 (meta-information) ,如 针对 搜索 引擎 的 关键 词 和 文档 
描述 等 ,由 二 meta 二 来 定义 。 
元 元 素 是 一 个 没有 元 素 内 容 的 空 元 素 , 它 由 志 meta 之 标记 的 属性 定义 了 与 文档 相关 
联 的 名 称 / 值 对 ,其 常见 属性 如 表 2-4 所 示 。 
表 2-4 元 元 素 常见 属性 一 览 表 


属 性 值 描 述 
teiy Cpe 把 content 属性 关联 到 HTTP 头 部 
expires 
author 
descripti: 
name TERA 把 content 属性 关联 到 一 个 名 称 
keywords 
copyright 
content some_text 定义 与 http-equiv 或 name 属性 相关 的 元 信息 


说 明 : 

(1) http-equiv 属性 用 于 指示 服务 器 在 发 送 实 际 的 文档 之 前 要 传送 给 浏览 器 的 
MIME 文档 头 部 包含 名 称 / 值 对 。 

例 2-1 按照 XHTML 规则 ,每 个 网 页 中 服务 器 都 应 告诉 浏览 器 准备 接受 的 HTML 
文档 类 型 以 及 文档 中 所 采用 的 字符 编码 ,对 应 的 名 称 / 值 对 是 : content-type: text/html, 
与 之 对 应 的 meta 标记 为 : 


<meta http-equiv= "content-type " content= "text/html;charset=gb2312 " /> 


例 2-2 服务 器 要 告诉 浏览 器 页 面 缓 存 的 过 期 时 间或 者 网 页 的 有 效 期 限 到 2014 年 
12 月 31 日 ,对 应 的 名 称 / 值 对 是 : expires: 31 Dec 2014, 与 之 对 应 的 meta 标记 为 : 


<meta http-equiv= "expires" content="31 Dec 2014"> 


上 述 两 例 说 明了 content 属性 的 属性 值 应 与 http-equiv 属性 的 属性 值 相关 联 。 
(2) name 属性 : 用 于 定义 与 源 文档 有 意义 的 名 称 ,其 属性 值 也 是 与 content 属性 的 
属性 值 相关 联 的 。 


例 2-3 定义 网 页 关键 字 , 对 应 的 名 称 / 值 对 是 : keywords: 关键 词 列 表 。 所 提供 的 
关键 词 是 供 搜索 引擎 分 类 网 页 使 用 的 ,关键 词 是 最 能 反映 网 站 主题 而 贴 合 受众 ,有 助 于 网 
站 被 搜索 到 的 词语 列表 ,具体 关键 词 的 定义 和 优化 是 网 站 运 维 的 重要 内 容 , 可 参考 相关 专 
业 资 源 。 网 页 中 引入 关键 词 是 采用 meta 标记 实现 的 ,关键 词 之 间 用 英文 逗号 隔 开 ,定义 
凤凰 网 的 关键 词 对 应 的 meta 标记 为 : 


<meta content 一 "凤凰 ,凤凰 网 ,凤凰 新 媒体 ,凤凰 卫视 ,凤凰 卫视 中 文 台 , 资 讯 台 ,电影 台 , 欧 洲 台 ， 

美洲 台 , 凤 凰 周刊 ，phoenix phoenixtv" name= "keywords" /> 

例 2-4 定义 网 页 的 描述 ,对 应 的 名 称 / 值 对 是 : description: 网 页 描述 。 网 页 描述 有 
助 于 提升 网 页 的 排名 ,网 页 描述 也 是 网 站 运 维 的 一 个 方面 ,网 页 描述 中 要 尽 可 能 多 地 出 现 
关键 词 。 网 页 中 对 网 页 的 描述 是 采用 meta 标记 实现 的 ,描述 凤凰 网 meta 标记 为 : 

<meta name= "description" content 一 "凤凰 网 是 中 国 领先 的 综合 门户 网 站 , 提供 含 文 图 音 视 频 的 

全 方位 综合 新 闻 资 讯 ,深度 访谈 、 观 点 评论 .财经 产品 .互动 应 用 、 分 享 社区 等 服务 ,同时 与 凤凰 无 


线 `. 风 凰 宽频 形成 三 屏 联 动 , 为 全 球 主流 华人 提供 互联 网 ,无 线 通信 、 电 视 网 三 网 融合 无 颖 衔接 的 
新 媒体 优质 体验 ." /二 


例 2-5 定义 网 页 的 作者 ,如 : 
<meta name= "author" content=" RAR" /> 
例 2-6 定义 网 页 的 版 权 ,如 : 


< meta name = " copyright" content = " Copyright 1999-2008. www. ifeng. com . All Rights 

Reserved. " /> 

网 页 标题 title, X BË is] keywords 和 网 页 描述 description 有 网 页 的 三 要 素 之 称 。 它 
们 虽然 不 显示 在 网 页 正文 中 , 却 可 以 提升 网 站 的 排名 ,在 早期 的 Internet 时 代 , 这 些 要 
素 被 看 作 提 高 网 站 排名 的 秘密 武器 ,所 以 给 网 站 的 每 个 网 页 添加 这 些 内 容 是 很 有 必 
要 的 。 


3. Ak <link> 


A< link >R fg M Bj X: FS RARE SC 2 E gË vy 8 H. il A < link >> ú # E 4 ñi 
页 面 文档 中 引入 一 个 名 为 index. css ñJ #F 88 FE Ñ & X f. n] #E—head> #I< /head> 2 f] 
添加 以 下 代码 : 


<link href= "index. css "rel 一 "stylesheet " type="text/css" /> 


其 中 : 

href= "index. css "表示 连接 的 外 部 文件 。 

rel= "stylesheet "表示 关系 是 样式 表 。 

type 一 "text/css" 表 示 外 部 文档 类 型 是 css 文件 。 

以 上 是 二 link 之 元 素 最 常见 的 用 法 ,也 是 实现 内 容 与 表现 分 离 的 关键 语句 ,这 在 后 面 
的 章节 会 系统 学 习 。 


4. 样式 元 素 style 


利用 二 style> 元 素 在 页 面 中 嵌入 样式 ,是 调试 样式 的 一 种 手段 ,调试 后 最 好 还 是 将 
样式 以 独立 的 文件 保存 以 最 大 限度 地 实现 内 容 和 表现 的 分 离 。 

本 章 介绍 了 用 于 标识 页 面 内 容 的 XHTML 主要 元 素 ,对 于 XHTML 元 素 应 有 如 下 
两 个 方面 的 认识 : 一 是 在 对 文档 使 用 CSS 之 前 ,首先 要 确保 页 面 是 以 结构 化 的 方式 编写 
的 , 即 依据 内 容 的 结构 (语义 ) 而 不 是 内 容 的 表现 来 选择 XHTML 标记 ; 二 是 根据 
XHTML 元 素 是 否 在 新 的 一 行 中 开始 可 分 为 块 元 素 ( 如 二 hl 之 一 一 h6 二 一 p 二 、<<ul 二 、 
<ol>, <dl>, < form > #ll < div > $) AIT A IER <a>, <img>, < span > l 
<input— %) ,因为 块 元 素 和 行内 元 素 是 影响 布局 的 重要 因素 。 

本 章 中 还 引入 了 ”站 点 ?这 个 术语 , 它 是 一 种 管理 站 内 资源 的 机 制 , 网 站 的 设计 、 制 作 、 
维护 都 离 不 开 它 ; 最 后 在 介绍 头 元 素 二 head 二 时 ,着 重 提 及 了 网 页 的 三 要 素 ( 网 页 标题 、 
关键 词 和 网 页 描述 ) ,任何 网 页 都 少不了 这 几 个 要 素 。 

页 面 内 容 标记 完成 后 就 为 下 一 章 将 要 学 习 的 CSS 准备 好 加 工 的 素材 了 。 


自主 训练 


练习 2-1: 尝试 利用 “记事 本 ”创建 自己 的 第 一 个 网 页 ,具体 要 求 如 下 。 

(1) 利用 记事 本 创建 一 个 自己 的 页 面 ,文件 名 为 ex2-1. html, 要 求 正文 中 含 一 个 一 级 
标题 和 两 个 内 容 相 关 的 段落 。 

(2) 粘贴 素材 “ex2\1. txt? 中 的 代码 片段 ,将 ex2-1. html 变 成 具有 XHTML 规则 的 
页 面 代码 。 

练习 2-2: 区 分 HTML 元 素 、 元 素 内 容 和 元 素 属性 。 具 体 要 求 如 下 。 

(1) 根据 过 h2 id= "head2" > This is a heading 达 /h2 祖 ,完成 以 下 填空 。 

h2 的 元 素 内 容 : 

h2 的 属性 名 和 属性 值 分 别 是 : 

(2) 下 面 选项 中 正确 嵌 套 的 是 : 

O 二 p 二 由 中 国 豪 协 、 二 em 二 顺德 职业 技术 学 院 二 /em 二 共同 组 建 的 中 国 豪 饪 学 院 成 
立 大 会 …</p> 

@ 二 p 二 由 中 国 豪 协 、 二 em 放 顺 德 职业 技术 学 院 共同 组 建 的 中 国 豪 饪 学 院 成 立 大 会 … 
</p></em> 

(3) 对 照 素材 “ex2\2. html" 的 代码 (用 记事 本 查看 页 面 代码 ) 和 显示 效果 ,完成 填空 。 

页 面 中 的 块 标记 有 : 

页 面 中 的 行 标 记 有 : 

包含 嵌 套 的 标记 有 : O 

练习 2-3: 体验 标题 元 素 .段落 元 素 和 二 br /二 等 元 素 的 应 用 。 

(1) 补充 表 2-5 中 各 标记 的 功能 描述 。 
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表 2-5 标记 的 功能 描述 


标 记 
<p> 
<br/> 
<h1> 


功能 描述 


(2) 利用 记事 本 打开 素材 “ex2\3. html”, 按 图 2-47 所 示 的 浏览 效果 编写 (不 要 考虑 
居中 的 效果 )HTML 代码 ,要求 如 下 。 
O 代码 中 只 能 使 用 一 组 二 p 之 标记 。 
© 代码 中 添加 两 处 注释 。 
@ 格式 良好 , 即 用 到 的 每 个 标记 都 要 闭合 。 
练习 2-4: 体验 列表 元 素 。 
(1) 填写 表 2-6 中 各 标记 的 功能 描述 。 
R26 列表 元 素 的 功能 描述 
标 w 功能 描述 
<ol> 
<ul> 
<li> 
<dl> 
<dt> 
<dd> 


(2) 利用 记事 本 打开 素材 “ex2\4. html”, 利 用 二 dt 二 二 ul 二 和 二 ol 二 标记 编写 实现 
如 图 2-48 所 示 效 果 的 代码 。 


水 果 
春晓 `=. 
- ER 
- 桃子 
春 眠 不 觉 晓 ， 
处 处 闻 旷 鸟 。 am 
夜来 风雨 声 ， A m 
花草 知 多 少 。 B. 狗 
图 2-47 浏览 效果 图 2-48 浏览 效果 


提示 : 编号 A 和 也 可 以 给 标记 一 ol 一 添加 属性 style= "list-style-type: upper-alpha;"。 
练习 2-5: 体验 图 像 元 素 。 
(1) 补充 表 2-7 中 各 属性 的 功能 描述 。 
表 2-7 图 像 元 素 属性 的 功能 描述 
功能 描述 


width 


| 第 z 章 xhTML 标记 与 必用 实例 ] 


(2) 了 解 网 站 中 图 片 的 规格 。 
O 浏览 经 常 光顾 的 3 个 网 站 首页 , 按 图 片 的 尺寸 ,从 中 找 出 大 .中 、 小 三 张 图 片 ,完成 


表 2-8, 
表 2-8 图 片 规格 
网 站 名 称 大 图 片 尺寸 中 图 片 尺寸 小 图 片 尺寸 最 小 文件 最 大 文件 
及 类 型 及 类 型 及 类 型 kB kB 


@ 对 比 平时 所 拍照 图 片 文件 的 大 小 , 若 放 到 网 上 发 布 ,该 如 何 处 理 ? 
(3) 利用 记事 本 打开 素材 “ex2\5. htm”, 利 用 二 hl 二 二 p 二 .二 ul 之 和 二 img 过 标记 编写 
一 个 网 页 ,以 “移动 应 用 开发 "为 主题 ,组 织 两 段 相 关 的 文字 、 相 关 的 列表 和 两 张 相关 图 片 。 
练习 2-5: 体验 超 链接 二 a 二 元 素 。 
(1) 补充 表 2-9 中 各 属性 的 功能 描述 。 
表 2-9 一 a> 元 素 属性 的 功能 描述 
属 性 功能 描述 
href 
id 
title 


(2) 基于 素材 文件 夹 *ex2\ex2_6” 创 建 一 个 名 为 “练习 2-6” 的 站 点 ,给 首页 、 页 面 1 和 
页 面 2 相对 应 的 页 面 文件 index. html、pl. html, p2. html 中 相关 的 内 容 添 加 二 a 二 标记 ， 
各 页 面 的 浏览 效果 如 图 2-49 所 示 ,并 实现 相应 的 链接 功能 。 


这 是 页 面 1 
这 是 首页 链接 到 页 面 p2 
mm menma 
页 面 2 meam 
图 片 A ealgoogle 
EEB 
(a) 首页 效果 (b) 首页 1 效果 (c) 首页 3 效果 


图 2-49 练习 2-6 中 各 页 面 的 浏览 效果 


练习 2-6: 体验 表格 元 素 。 
(1) 补充 表 2-10 中 各 标记 的 功能 描述 。 


表 2-10 表格 元 素 的 功能 描述 
表 格 功能 描述 


<table> 
<caption> 
<th> 
<u> 
<td> 
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(2) 编写 如 图 2-50 所 示 的 表格 的 HTML 代码 。 


个 人 信息 表 
姓名 出 生年 月 
性 别 籍贯 
相片 
通信 地 址 
E-mail 
图 2-50 表格 


练习 2-7, 了 解 各 表单 元 素 的 标签 。 
完成 表 2-11 中 各 个 标记 的 功能 描述 。 
表 2-11 表单 元 素 的 功能 描述 

标 记 功能 描述 
<form> 
<input> 
<textarea> 
<fieldset> 
<label> 
<legend> 
<select> 
<option> 


练习 2-8: 体验 用 div 元 素来 组 织 页 面 内 容 。 
基于 “ex2\ 练 习 2-9. doc” 中 的 文字 素材 ,用 两 个 页 面 文件 分 别 写 出 图 2-51 和 图 2-52 
的 XHTML 代码 (不 考虑 背景 .字体 颜色 等 外 观 效 果 ), 并 夯 出 页 面 代 码 的 组 织 结构 图 。 


妹 话 好 说 ， 钨 话 柔 说 ， 大 话 小 说 ， 笑 话 冷 说 
正 着 说 、 反 着 说 、 托 人 说 ”自己 说 、 抢 着 说 
BAAR. DARA TRE Hiari 
说 话 的 魅力 ， 沟 通 的 秘笈 

更 多 


RÆSA, ADERS NDES | 
-提高 自控 力 的 最 有 效 途径 ， 在 于 弄 清 自己 如 | 
想 放松 一 下 ， 却 熬夜 上 网 ; 一 直 想 减肥 ， 总 . 
强大 的 意志 力 是 每 个 人 触手 可 及 的 


图 2-51 页 面 1 效果 
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FE 因 香 天 章 林 青青 而 得 名 。 柱 出 诗 : “EBDZMLE, MHHHETS” 

Z: 因为 者 季 包 合 了 1 .2 3 月 ,而 合 称 " 三 春 "。 ZAA: “ita b, 报 
m=" + 

EW: URP AEF *EtSENDGb2BZ, HEARNE 
成， 也 有 说 反 于 下 得 。 二 百年 未， 路 青 厅 成 了 一 种 公式 ， 仿 保 只 有 行 了 这 种 人 式 ， 
AAERATER. “ETEF. BESA: "ARBA (HE IEEE 
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图 2-52 ”页面 2 效果 


练习 2-9: 体验 头 元 素 。 
(1) 访问 3 个 常 光顾 的 网 站 首页 ,通过 查看 源 代码 ( 右 击 ,选择 “查看 源 " 命 令 ) ,完成 


表 2-12。 
表 2-12 XTR 
关键 词 页 面 描述 三 要 素 之 间 的 
网 站 名 称 aue (keywords) (description) 关联 程度 (高 /中 / 低 ) 


(2) 自己 拟 设 一 个 网 页 主题 ,围绕 这 个 主题 设 定 关 于 这 个 主题 网 页 的 title、keywords 
和 description ,并 利用 本 章 所 学 的 元 素 标记 组 织 页 面 内 容 。 


在 基于 有 效 的 XHTML 规则 , 且 格 式 良 好 地 标记 网 页 内 容 的 基础 上 ,采用 有 效 的 
CSS 呈现 内 容 , 这 样 的 网 站 就 是 符合 Web 标准 的 网 站 。 本 章 主要 介绍 CSS、CSS 的 基本 
语法 、 页 面 中 设置 CSS 的 几 种 方式 以 及 CSS 样式 的 分 类 。 


3.1 CSS 概述 


CSS 是 Cascading Style Sheet 层 倒 样式 表 的 缩写 ,是 由 W3C 定义 和 维护 的 标准 , 它 
是 一 种 用 来 给 结构 化 文档 (如 HTML, XHTML 和 XML 等 ) 添 加 样式 的 计算 机 语言 。 
CSS 有 层 倒 和 样式 表 两 层 含义 ,其 中 样式 表 比 较 好 理解 ,就 是 包含 许多 样式 的 文本 文件 
(其 扩展 名 为 CSS) ,而 样式 是 给 结构 化 的 标记 (可 理解 为 上 一 章 所 学 习 的 各 种 XHTML 
标记 ) 定 义 表现 形式 ,如 文字 效果 ,边框 .背景 和 位 置 等 ; 对 于 层 合 ,由 于 XHTML 文档 是 
一 种 层次 结构 (如 大 部 分 标记 中 可 包含 其 他 标记 ), 当 有 多 个 样式 指向 同一 元 素 时 ,该 元 素 
的 最 终 效 果 由 针对 性 最 强 的 样式 决定 ,这 就 是 所 谓 层 释 规 则 ,具体 在 后 续 的 章节 中 介绍 。 

CSS 1 是 W3C 于 1996 年 12 月 推出 的 ,由 于 早期 浏览 器 对 CSS 的 支持 不 理想 ,使 得 
CSS 备 受 冷落 。 随 着 2000 年 年 底 W3C 推荐 标准 HTML 4. 01 3 XHTML 1.0 的 发 布 ， 
其 所 倡导 的 “内 容 与 表现 分 离 ” 的 理念 逐步 被 业界 认可 ,以 及 2007 年 7 月 发 布 的 CSS 2.1 
获得 大 多 数 主流 浏览 器 的 良好 支持 ,CSS 才 重 新 焕发 生机 ,并 迅速 流行 起 来 ,成 为 Web 页 
面 设计 的 新 标准 ,目前 CSS 3 是 最 新 的 版 本 。 
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CSS 是 给 Web 页 的 页 面 元 素 设置 表现 样式 的 W3C 标准 ,一 条 CSS 规则 包含 选择 符 
和 样式 声明 (列表 ) 两 部 分 ,其 中 每 条 样式 声明 又 包含 属性 和 属性 
值 两 部 分 。 其 通用 语法 格式 是 : 


选择 符 { 样 式 声明 列表 } picolor:blue:} 
其 中 样式 声明 列表 由 一 组 或 者 多 组 诸如 * 属 性: 属性 值 ; ”的 | 
样式 声明 构成 。 如 p{color: blue; } 就 是 让 文档 中 的 所 有 段落 文 
本 为 蓝 色 ,可 用 如 图 3-1 所 示 的 对 应 关系 来 具体 化 。 — 
一 条 CSS 规则 可 以 包含 多 条 样式 声明 ,如 想 要 “页面 中 所 有 图 3-1 CSS 规则 示意 图 


属性 | | 属性 值 


选择 符 | | 样式 声明 
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段落 文本 颜色 是 蓝 色 ,字体 大 小 是 15px, 首 行 缩 进 2 个 字符 ”, 那 么 实现 这 种 表现 形式 的 
CSS 规则 为 : 


pí 
color: blue; 
font-size: 15px; 
text-indent:2em; 


} 


CSS 规则 中 的 选择 符 用 于 指定 样式 施加 的 对 象 ,或 者 说 样式 的 受 体 。 正 因为 有 了 多 
种 选择 符 才 可 以 定位 到 页 面 中 的 任意 位 置 ,实现 表现 与 内 容 的 分 离 ,否则 只 能 使 用 行内 的 
CSS, 理 解 和 灵活 使 用 选择 符 是 理解 CSS 的 核心 内 容 。 

样式 声明 (列表 ) 则 是 明确 应 用 规则 后 会 呈现 的 效果 ,或 者 说 受 体 的 表现 形式 ,每 条 声 
明 的 属性 和 属性 值 之 间 用 英文 的 冒号 隔 开 ,而 每 条 声明 之 间 用 英文 的 分 号 隔 开 。 

属性 是 用 来 确定 要 改变 元 素 的 哪 一 个 方面 (如 边框 颜色 .背景 等 ) ,每 个 元 素 都 有 很 
多 通过 CSS 设置 的 属性 ,这 些 属 性 根据 元 素 而 不 同 , 如 可 以 给 段落 元 素 设置 文本 的 color 
和 font-size 属性 ,但 是 不 能 给 图 像 元 素 设置 这 些 属性 。 

属性 值 则 是 设置 属性 是 多 少 或 者 怎么 样 ,CSS 规则 中 的 属性 值 可 分 为 以 下 3 类 。 


1. 单词 


如 {float:left; position:absolute; color:red; } CSS 规则 中 的 “left”、“absolute” 和 “red” 
就 是 属性 值 是 单词 的 情形 ,如 果 一 个 属性 对 应 的 属性 值 是 单词 ,那么 这 些 属性 值 是 CSS 
标准 预先 规定 好 的 ,只 能 从 现 有 的 选项 中 按 需 选取 ,不 能 自 定义 。 


2. 数字 值 


数字 值 用 于 定义 元 素 的 宽度 、 高 度 或 者 粗细 。 实 际 中 根据 需要 ,有 时 使 用 绝对 值 , 单 
位 一 般 是 像素 px( 如 width:600px;); 有 时 使 用 相对 值 ,单位 可 以 是 %( 如 width:50%; 表 
示 宽 度 是 父 元 素 的 一 半 ) 或 者 em (如 textrindent:2em; 表 示 文 本 缩 进 2 个 字符 的 宽度 )， 
这 里 em 是 与 字体 大 小 有 关 的 度量 单位 ,其 计算 依据 是 一 种 字体 的 字符 宽度 ,也 就 是 说 ， 
em 的 大 小 依据 使 用 字体 的 不 同 而 不 同 。 

与 字体 大 小 相关 的 度量 单位 还 有 ex,ex 是 指 给 定 字 体 小 写字 母 x 的 高 度 。 


3. 颜色 值 


在 CSS 中 ,经 常 使 用 颜色 值 来 指定 文本 颜色 .背景 颜色 和 边框 颜色 。 颜 色 值 可 采用 诸 
如 “red”、“blue” 等 表示 颜色 名 的 单词 .但 是 这 有 很 大 的 局 限 性 ,因为 W3C 标准 只 规定 了 
16 中 颜色 名 (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, 
silver, teal, white, yellow) ,而 且 同 一 个 颜色 名 的 浏览 效果 还 会 因 浏览 器 的 不 同 而 有 些许 差异 。 

由 于 计算 机 /电视 等 显示 屏 是 采用 RGB 的 颜色 模式 , 即 颜色 由 红色 Red、 绿 色 Green 
和 蓝 色 Blue 这 三 原色 混合 而 成 (所 有 颜色 混合 是 白色 ,去 掉 所 有 颜色 即 为 黑色 ) ,实际 中 
常 使 用 以 # 开 头 的 十 六 进 制定 义 的 颜色 值 并 RRGGBB, 每 种 颜色 RR.GG.BB 均 由 8 位 
的 二 进 制 数 来 描述 ,其 取 值 范围 是 0 一 255, 其 中 0 对 应 的 十 六 进 制 表 示 为 : # 00,255 对 
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应 的 十 六 进 制 表示 为 : #FF; 或 者 用 rgb(R,G,B) 表 示 颜 色 值 ,这 里 R.G、B 的 取 值 范围 
是 0 一 255。 如 红色 可 以 是 “#ffo000”““ 井 FF0000”“rgb(255,0.0)? 或 者 "RGB(255,0,0)”， 
R 3-1 表示 白色 .黑色 三 原色 和 三 次 色 ( 由 三 原色 中 相 邻 两 种 颜色 合成 的 颜色 , 共 三 种 ， 
分 别 为 黄色 yellow\ 水 绿 aqua 和 紫色 purple) 颜 色 值 的 几 种 表示 方式 。 


表 3-1 颜色 值 的 几 种 表示 方式 


颜色 # RRGGBB rgb(R,G,B) 单词 
黑色 # 000000 rgb(0,0,0) black 
红色 # FF0000 rgb(255,0,0) red 
绿色 # 00FF00 rgb(0,255,0) green 
蓝 色 #0000FF rgb(0,0,255) blue 
黄色 # FFFF00 rgb(255,255,0) yellow 
水 绿 #00FFFF rgb(0,255,255) aqua 
紫色 # FF00FF rgb(255,0,255) purple 
白色 # FFFFFF rgb(255,255,255) white 


需要 说 明 的 是 : 当 用 #RRGGBB 表示 颜色 值 时 ,如 果 满 足 第 1 位 与 第 2 位 相等 .第 3 位 
与 第 4 位 相等 .第 5 位 与 第 6 位 相等 这 三 个 条 件 , 可 缩写 成 3 位 , 如“# FF0000”, 
“ #9988CC” TJ 4ra fi E A“ H F00”, “ 498C”. 4E Adobe Dreamweaver 工具 制作 网 
页 时 ,利用 其 提供 的 智能 工具 选取 颜色 时 ,会 弹出 如 图 3-2 
所 示 的 Web 安全 色 面 板 ,其 特点 是 颜色 值 中 只 使 用 了 0、3、 
6.9.C 和 下 这 6 个 数字 或 字母 ,而 且 都 采取 诸如 “#33F” 这 
样 的 三 位 缩写 形式 ,这 就 是 所 谓 的 Web 安全 色 ( 共 216 种 
颜色 ) ,考虑 到 现在 的 显示 设备 ,颜色 的 选取 完全 不 受 这 种 
Web 安全 色 的 限制 ,可 以 在 设计 中 应 用 任何 颜色 .关于 配 
色 方 面 的 知识 请 参阅 其 他 相关 文档 。 图 3-2 Web 安全 色 面板 
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标签 选择 符 和 组 选择 符 的 介绍 利用 素材 “ch3\exp3_1. html” 来 辅助 ,图 3-3 是 素材 文 
件 的 代码 片段 。 


<html> 

<body> 
<hl > 第 1 个 标题 </h1> 
<p > 第 1 个 段落 </p> 
<p> 第 2 个 段落 </p> 
<h2 >% 2 个 标题 < /h22> 
<p > 第 3 个 段落 </p> 

</body> 

</html> 


图 3-3 素材 的 代码 片段 


(1) 体会 浏览 器 对 各 个 HTML 元 素 都 有 默认 的 样式 (可 比较 IE 和 Firefox 的 浏览 
效果 ) 。 
查看 素材 “ch3\exp3_1. html” 的 浏览 效果 ,留意 浏览 器 对 标题 和 段落 默认 的 字体 颜 
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色 、 大 小 、 对 齐 和 间距 等 样式 。 

(2) 利用 自 定义 CSS 指定 元 素 的 样式 。 

例 3-1 素材 “ch3\exp3_1. html”, 将 页 面 中 3 个 段落 的 文本 颜色 设置 为 红色 ,第 1 
个 .第 2 个 标题 的 颜色 为 蓝 色 。 

对 应 的 CSS 语句 是 : 


p{color:red;} 

hl, h2{color: blue;} 

(3) 在 页 面 中 利用 嵌入 式 引 入 CSS。 要 使 设置 好 的 CSS 发 挥 作用 ,需要 将 上 述 两 条 
CSS 语句 引入 页 面 中 ,引入 的 方式 有 多 种 , 若 这 两 条 语句 以 独立 的 CSS 文件 存在 , 则 需要 
在 过 head 标 记 中 利用 过 link 盖 标记 引入 ,这 是 最 常 采 用 的 方式 ,将 在 本 章 后 续 的 内 容 中 
学 习 ; 若 这 两 条 语句 直接 放 在 页 面 文件 中 ( 即 与 HTML 元 素 在 同一 个 文件 ), 则 需要 在 
<head> HKE PAH <style> HREH A A REA ARII A CSS, 具 体 如 图 3-4(b) 


所 示 。 
<html> 
<head> 
<style type=" text/CSS"> 
=s p(color:red;) 
<hl > 第 1 个 标题 </h1> hl,h2(color:blue;) 
<p> 第 1 个 段落 </p> </style> 
<p> 第 2 个 段落 </p> </head> 
<h2 > 第 2 个 标题 </h2> <body> 
<p> #3 tE </p> ia 
- </body> 
(a) 位 于 一 body 之 之 内 的 页 面 代码 (b) fE<head>2 Wik A CSS 


图 3-4 在 页 面 中 采用 嵌入 式 CSS 


浏览 在 素材 “ch3\exp3_1. html? 嵌 入 了 CSS 样式 的 网 页 ,体会 CSS 对 页 面 效 果 的 影 
响 , 在 这 一 过 程 中 ,用 到 了 标签 选择 符 和 组 选择 符 。 

D 标签 选择 符 。 标 签 选择 符 是 利用 标签 设置 样式 ,其 形式 是 : 标签 名 {样式 表 ) ,如 
“ptcolor:red;)” 就 是 利用 p 作为 选择 符 , 实 现 所 有 p 标记 中 的 文本 颜色 是 红色 的 样式 
效果 。 

© 组 选择 符 。 当 不 同 的 标记 具有 相同 的 样式 需要 时 ,可 采用 组 选择 符 将 这 些 标记 看 
成 一 组 ,每 个 标记 可 看 成 组 成 员 , 组 成 员 之 间 用 英文 逗号 隔 开 ,如 “hl,h2{color: blue;}” 
的 CSS 规则 实现 了 标题 hl 和 h2 的 文本 颜色 均 为 红色 的 样式 效果 , 它 等 价 于 以 下 两 条 
CSS 规则 : 

hl{color:blue;} 

h2(color:blue;) 

组 选择 符 中 的 组 成 员 可 以 是 标记 、 后 面 即将 学 习 的 id 选择 符 、class 选择 符 、 伪 类 或 
者 伪 元 素 等 。 
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例 3-2 基于 素材 “ch3\exp3_2. html”, 将 HTML 代码 片段 第 3 个 段落 的 字体 颜色 
设置 为 绿色 。 

该 例 要 求 更 细 化 ,可 采用 以 下 几 种 方式 实现 。 

方式 1: h2 十 p{color:green;} 

方式 2: 给 元 素 添加 id 属性 定位 。 

(1) 给 第 3 个 <<p 二 添加 id 属性 , 即 二 p id="p3" >% 3 个 段落 </p>. 

(2) 添加 CSS 规则 : p+# p31color:green;) 

方式 3: 给 元 素 添加 class 属性 定位 。 

(1) 给 第 3 个 二 p 二 添加 class 属性 , 即 二 p class= "pg" >% 3 个 段落 </p>. 

(2) 添加 CSS 规则 : p. pg{color:green;} 

为 了 依次 单独 测试 以 上 三 种 方式 ,可 利用 CSS 语法 注释 语句 的 语法 , 即 “/* 被 注释 
的 CSS 样式 * /”。 如 图 3-5 所 示 的 CSS 片段 ,两 条 被 注释 的 CSS 样式 就 不 起 作用 了 。 在 
编写 CSS 样式 时 ,不 管 是 调试 还 是 加 强 代码 可 读 性 会 经 常用 到 代码 的 注释 (注意 ,要 区 分 
注释 HTML 代码 的 “二! -- 被 注释 的 HTML 代码 -- 二 ”)。 


<html> 
<head> 


<style type= "text/CSS"> 

p{color:red;} 
hl,h2(color:blue;) 
/ * h2+plcolor:green;) 
p#p3(color:green;) * / 
p. pg{color:green;} 

</style> 

</head> 

<body> 


</body> 
图 3-5 CSS 中 的 代码 注释 


方式 1 用 到 的 选择 符 叫 相 邻 选择 符 (IE 6 和 IE 7 不 支持 ), 这 里 的 h2 十 p 是 指 紧邻 
二 h2 二 标记 且 与 二 h2 二 同 级 的 第 一 个 段落 。 

方式 2 和 方式 3 涉及 一 个 非常 重要 且 常 见 的 现象 , 即 在 HTML 代码 中 定义 id 和 
class 属性 和 在 CSS 中 引用 其 属性 值 ,要 遵守 XHTML 如 下 规定 。 

(1) id 和 class 的 属性 值 只 能 是 以 字母 开头 的 字母 数字 下 划 线 系列 。 否 则 就 是 无 效 
的 属性 值 ,予以 忽略 。 

(2) 对 应 的 引用 : 在 id 和 class 的 属性 值 前 分 别 加 上 英文 的 井 号 # 和 点 号 . BB. 
“Hid JAHE” AI“. class 属性 值 ”。 

(3) 同一 页 面 中 ,id 的 属性 值 具有 唯一 性 ( 即 只 能 用 于 定义 一 个 元 素 ) class 的 属性 


值 表示 一 类 ( 即 可 用 于 定义 多 个 元 素 ) 。 如 图 3-6(a) 所 示 的 id 定义 是 违规 的 。 


<hl > 第 1 个 标题 </h1> <hl > 第 1 个 标题 </h1> 

<p id="p3"> 第 1 个 段落 “二 /p> <p class="pg"> 第 1 个 段落 </p> 
<p> #2 RE </p> <p> #2 </p> 

<h2 > 第 2 个 标题 </h2> <h2 > 第 2 个 标题 < /h2> 
<pid="p3"> 第 3 个 段落 </p> <p class 二 "pg" 第 3 个 段落 </p> 
(a) 错 : 因 id 的 属性 值 具有 唯一 性 (b) 对 : 因 class 的 属性 值 表示 一 类 


图 3-6 id 和 class 属性 对 比 


若 多 个 选择 符 同时 都 指向 一 个 位 置 , 如 图 3-7(b) Br = 43646 44h24- p”.“p # p3” 
#l“p. p3” 都 是 指向 图 3-7(a) 中 的 第 3 个 段落 ,车 再 考虑 浏览 器 对 二 p 二 标记 默认 的 样式 ， 
那么 就 有 4 个 字体 大 小 施加 于 第 3 段落 二 p 二 标记 中 的 文字 ,这 4 4636 P pH p37 00 
级 别 最 高 。 所 以 最 终 起 作用 的 声明 是 “*p#p3{font-size:35px;)”, 即 第 3 段落 的 字体 大 小 
是 35px。 这 里 就 是 CSS 层 生性 规则 在 起 作用 了 ,总 的 原则 是 : 针对 性 越 强 ,级 别 越 高 。 
CSS 层 释 性 规则 具体 体现 如 下 。 

(1) id 的 针对 性 高 于 类 。 如 “pb # p3 (font-size: 35px;)” 优 先 于 “p. pg {font- 
size:50px;)”, 

(2) 类 的 针对 性 高 于 位 置 标 记 。 如 “Pp. pglfont-size: 50px;)” 优 先 于 “h2 十 p{font- 
size: 1]0px;}”。 

G) 位 置 标 记 针 对 性 高 于 普通 标记 。 如 “h2 十 p{ font-size:10px;;)” 优 先 于 浏览 器 对 
P 标记 的 默认 字体 大 小 ( 绝 大 多 数 浏览 器 默认 的 p 元 素 文本 大 小 约 为 16px) 。 

(4) 显示 定义 标记 的 针对 性 高 于 默认 样式 。 如 图 3-7(b) 中 声明 “p{color:red;)}” 产 生 
的 效果 是 : 浏览 时 图 3-7(a) 中 第 1 段 , 第 2 段落 的 文本 是 红色 ,覆盖 了 浏览 器 默认 的 所 有 


文本 是 黑色 的 设置 。 
<html> 
<head> 
<style type=" text/CSS"> 
p{color:red; } 
hl,h2(color:blue;) 
h2+pí(font-size:10px;color: blue; ) 
ma p# p3{font-size:35px; } 
<hl > 第 1 个 标题 </h1> p. pg{font-size:50px;} 
<p 二 第 1 个 段落 </p> </style> 
<p 二 第 2 个 段落 </p> </head> 
<h2 > 第 2 个 标题 </h22> <body> 
<p id="p3" class= "pg"2>% 3 个 段落 /Pp 二 i 
本 <body> 
(a) tF <body> A ñ Pt HRE (b) #Æ<head> ik À CSS 


图 3-7 EE. 多 个 CSS 样式 声明 施加 于 同一 个 html 元 素 
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对 于 初学 者 ,在 实际 的 体验 中 可 通过 依次 注释 优先 级 别 较 高 的 CSS 样式 声明 来 测试 
上 述 规则 ,如 图 3-7(b) 所 示 的 样式 声明 中 出 现 了 典型 的 层 芋 现象 ,最 终 发 挥 作用 的 样式 
声明 是 针对 性 最 高 的 选择 符 后 面 的 样式 声明 , 即 :“p#p3{font-size:35px;}”。 
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后 代 选 择 符 的 讲解 基于 图 3-8 所 示 的 页 面 代码 片段 。 


<body> 
<h1>% 1 个 标题 </h1> 
<p class="p1"> 第 一 span>1 一 /span> 个 段落 ”二 /p> 
<P> 第 2 个 段落 </p> 
二 h2 二 第 2 个 标题 </h2> 
<p id="p3" > 89$—<span2>3</span> Ë$ </p> 
</body> 


图 3-8 代码 片段 


图 3-8 代码 片段 的 层次 结构 可 用 图 3-9 表示 。 

WH: <body> HEA 5 AFHR, AE <hl >, <p>, <p>, <h> HKp>, 
这 5 个 元 素 之 间 是 同 级 ( 即 兄 弟 关 系 ) KE <body> hy FRE RFRA U26382), sk 
者 说 二 body 二 是 它们 的 父 标记 (或 父 元 素 ) ,这 些 标 记 
又 都 是 根 元 素 二 html 二 的 后 代 元 素 。 | 

第 1 个 和 第 3 个 二 p 之 标记 又 都 包含 子 元 素 Mhu p m p 
<span> $k il, Æ < span > hJ IEK; <body> $Æ T 
<span> HIZ , <span> tÈ <body > HJ | IEZ , P span span 
以 除根 元 素 二 html 之 外 ,其 余 的 html 标记 很 多 时 候 图 3-9 代码 片段 的 层次 结构 
具有 后 代 元 素 或 父 元 素 , 祖 元 素 等 多 重 身份 .取决 于 
具体 的 参照 标记 。 

例 3-3 基于 素材 “ch3\exp3_3. html”, 将 页 面 中 第 1 段 和 第 3 段 的 数字 1 和 3 的 文 
本 背景 颜色 分 别 设置 为 绿色 和 蓝 色 。 

可 采取 以 下 两 种 方式 。 

(1) 采用 后 代 选 择 符 定 位 ,并 为 其 设置 背景 样式 , 即 在 二 style 之 和 去 /style 二 标记 之 
间 增 加 以 下 两 行 样式 声明 : 


p. pl span{background-color:green;} 

p# p3 span(background-color: blue; ) 

从 上 述 代 码 可 以 看 出 ,后 代 选 择 符 的 要 点 是 标记 之 间 用 空格 隔 开 (前 面 学 到 的 组 选择 
符 是 标记 之 间 用 英文 逗号 隔 开 ) 。 

(2) 分 别 给 二 span 之 标记 添加 不 同 的 id 或 者 class 属性 ,然后 引用 属性 值 设置 背景 
样式 。 
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前 面 反复 提 及 每 个 浏览 器 都 有 一 个 默认 的 样式 表 , 不 同 浏览 器 之 间 的 样式 表 存 在 些 
许 不 同 , 自 定义 样式 就 是 希望 让 浏览 的 效果 在 主流 浏览 器 上 显示 一 致 ,要 实现 这 个 目标 有 
很 多 技术 细节 需要 处 理 , 使 用 通用 选择 符 * 是 最 常 采用 的 方式 之 一 ,这 里 的 通用 选择 符 * 
是 指 HTML 文档 中 的 所 用 标记 。 

浏览 器 给 块 元 素 定义 了 一 个 默认 的 外 边 距 margin 和 内 边 距 padding, 多 数 情 形 需要 
重新 定义 这 些 内 、 外 边 距 ,为 消除 浏览 器 默认 的 内 、 外 边 距 ,可 以 使 用 * 进行 样式 设置 ,有 
时 页 面 中 绝 大 多 数 的 文本 大 小 相同 ,也 可 使 用 x 来 设置 ,总 之 用 * 来 设置 页 面 中 共性 比较 
多 的 基础 样式 。 

例 3-4 基于 素材 “ch3\exp3_4. html”, 利 用 通用 选择 符 < 实现 : 使 页 面 中 所 有 元 素 
的 内 、 外 边 距 均 设置 为 0, 所 有 文本 颜色 是 红色 ,字体 大 小 是 13px。 

实施 过 程 如 下 。 

A) 先 浏览 exp3_4. html 的 页 面 效果 。 

(2) 使 用 记事 本 编辑 页 面 文档 ,在 二 style 之 和 二 /style 二 之 间 增 加 如 下 样式 : 


*{ 


margin:0; /* 取 消 所 有 元 素 四 周 的 外 边 距 * / 
padding :0; /* 取 消 所 有 元 素 四 周 的 内 边 距 * / 
color:red; 


font-size:13px; 


) 


保存 ,浏览 效果 。 

(3) 若 继续 添加 样式 : h2{color:blue; } ,那么 一 h2 二 标记 的 内 容 就 会 显示 蓝 色 。 这 
还 是 层 倒 规则 的 效用 ,因为 h2 的 针对 性 比 * 高 ,所 以 一 般 在 样式 声明 设置 的 最 开始 处 使 
用 通用 选择 符 * 来 设置 样式 。 

综 上 所 述 ,本 小 节 学 习 的 CSS 选择 符 有 以 下 几 种 。 

(1) 通用 选择 符 * 。 

(2) 标记 选择 符 。 

(3) 后 代 选 择 符 。 

(4) 类 选择 符 。 

(5) id 选择 符 。 

(6) 相 邻 选择 符 。 

对 于 上 述 选择 符 按照 “针对 性 越 强 级 别 越 高 "原则 ,具体 如 下 。 

(1) 选择 高 于 继承 。 

(2) ID 选择 符 高 于 类 选择 符 , 类 选择 符 高 于 标签 选择 符 。 

(3) 标签 #id 高 于 # id, 标 签 . class 高 于 . class, 
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类 是 在 标记 的 开始 部 分 添加 class 属性 定义 的 , 伪 类 (pseudo-class) 是 能 够 实现 好 像 
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给 元 素 添加 了 新 的 类 但 实际 上 并 没有 给 元 素 添 加 类 的 效果 。 通 过 伪 类 可 以 在 某 个 事件 发 
生 时 ,将 样式 应 用 到 元 素 上 ,最 常见 的 就 是 当 鼠 标 指向 或 者 悬 停 于 链接 元 素 上 所 发 生 的 变 
化 , 伪 类 还 能 基于 标记 中 某 些 匹配 的 条 件 来 应 用 样式 。 


1. 对 二 a 二 标记 的 某 些 事件 应 用 样式 的 伪 类 


(1) a:link; 设置 未 被 访问 的 超 链接 的 样式 。 
(2) a:visited: 设置 已 被 访问 的 超 链接 的 样式 。 
(3) a:hover: 设置 悬 停 时 的 超 链 接 的 样式 ,使 用 频率 最 高 。 
(4) a:active: 设置 单 击 鼠标 但 未 释放 时 的 超 链 接 的 样式 。 
如 以 下 样式 可 实现 过 a> 标 记 在 悬 停 状 态 时 实现 取消 下 划 线 和 颜色 变 蓝 的 效果 : 
a:visited{ 
text-decoration: none; 
color: blue; 
} 
注意 : 目前 主流 浏览 器 (车 为 IE, 需 8.0 以 上 ) 不 仅 支持 一 a 二 标记 的 悬 停 效果 ,也 支 
持 其 他 任何 元 素 的 悬 停 效 果 的 实现 ,如 p:hover 和 img:hover 等 ,这 在 后 面 章节 的 实例 中 
会 多 次 用 到 。 


2. 基于 某 些 匹 配 的 条 件 应 用 样式 的 伪 类 


A) :first-child: 选取 作为 其 他 元 素 的 第 1 个 子 元素 。 如 设置 列表 中 的 第 1 个 选项 
为 红色 ,可 直接 添加 “li;first-child{color:red;)” 的 CSS 规则 。 


框 的 效果 ,添加 “input:focus{border:1px blue solid;)” 的 CSS 规则 。 
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伪 元 素 是 能 够 实现 好 像 在 文档 中 添加 了 额外 元 素 但 其 实 并 没有 添加 额外 元 素 的 效 
果 。 以 :: first-letter 为 例 , 假 如 要 将 h2 中 的 首 字 符 设置 成 其 他 字符 的 2 倍 , 只 要 简单 地 
添加 “h2: first-letter { font-size: 2em; }” CSS 规则 即 可 ,就 好 像 是 添加 了 如 下 情形 的 span 
元 素 和 CSS 规则 (这 就 是 对 “ 伪 元 素 ” 的 诠释 ): 

h2 first-letter{font-size: 2em; } 

<h2>œ>< span class=" first-letter" >R< /span >oad to success! <h22> 

即 好 像 在 文档 中 添加 了 一 个 类 似 span 的 元 素 ,将 首 字符 “R” 单 独 标识 ,其 实 不 需要 ， 
这 就 是 伪 元 素 所 产生 的 效果 。 

还 可 以 将 伪 元 素 理解 为 通过 它 来 选取 文本 的 部 分 内 容 , 如 文本 的 首 字符 或 者 首 行 , 但 
是 对 诸如 所 span> 或 二 a> 的 行内 元 素 不 能 使 用 伪 元 素 。 

常用 的 伪 元 素 如 下 。 

(1) ::first-letter: 如 p; first-letter{font-size:2em; float:left; } 可 以 实现 如 图 3-10 
所 示 有 段落 首 字 下 沉 的 效果 。 在 实际 应 用 时 ,无须 在 伪 元 素 使 用 双 冒 号 ,使 用 单 冒号 即 可 。 

(2) ::firstline: W“p: first-line {font-style:italic; font-size:1. 5em; }” 的 CSS 规则 
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可 以 实现 段落 首 行文 本 产生 倾斜 ,字号 大 150% 的 效果 ,如 图 3-11 所 示 。 


aqa RS aa EE 421 liki, EKEK, hA 155 
WL. 32 AMETENAR A EMITE, 二 当 岁 月 随 着 古老 的 日 落日 出 而 流 走 ， 在 这 
详 ， 羊 群 依 | 于静， 和 和 ， 烘 甸 依 多 安详 ， 羊 群 依旧 于 静 ， 仿 佛 所 有 的 静物 部 是 一 种 隐 预 和 
机 富饶 的 商 河 大 齐 原 和 
图 3-10 ” 伪 元 素 :first-letter 的 效果 图 3-11 伪 元 素 :first-line 的 效果 
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多 类 在 语法 上 是 class 的 属性 值 中 包含 多 个 词 , 词 之 间 以 空格 隔 开 , 如 图 3-12 所 示 。 

上 述 代码 中 每 个 二 p 二 标记 都 定义 了 两 个 类 ,这 样 做 的 好 处 是 这 3 个 段落 相同 的 样式 
通过 引用 类 名 pp 来 设置 ,不 同 的 样式 引用 各 自 不 同 的 类 名 来 实现 。 

例如 ,要 求 设置 3 个 段落 的 字体 颜色 都 是 红色 ,字体 大 小 分 别 是 16px、18px 和 14px, 
可 添加 如 图 3-13 所 示 的 CSS 规则 。 


<body> 
s <style type= "text/CSS"> 
<p class="pp pl"> 第 1 个 段落 </p> .pp{color:red;} 
<p class="pp p2" 第 2 个 段落 </p> .Ppl{font-size:16px;} 
<p class 一 "pp p3"> 第 3 个 段落 </p> .p2{font-size:18px;} 
</body> .p3{font-size: 14px;} 
</style> 
图 3-12 多 类 的 定义 图 3-13 多 类 的 引用 


注意 : class 中 所 定义 的 多 个 类 名 用 空格 隔 开 ,类 名 前 后 顺序 不 影响 类 名 的 引用 。 

多 类 只 是 提供 了 定位 元 素 的 另 一 种 选择 方式 ,图 3-12 中 利用 多 类 的 定位 方式 也 可 以 
用 id 和 类 共用 的 方式 实现 ,如 图 3-14 所 示 。 

对 于 图 3-14 的 属性 变更 ,要 实现 相同 的 效果 对 应 的 CSS 规则 如 图 3-15 所 示 ,请 再 次 
留意 对 class 名 和 id 名 的 引用 。 


<body> 


<style type=" text/CSS"> 
= class= "pp" id="p1"> 第 1 个 段落 </p> .pp{color:red;} 
<p class="pp" p2" 二 第 2 个 段落 </p> #pl{font-size:16px;} 
<p class 一 "pp" id="p3"> 第 3 个 段落 </p> #p2{font-size:18px;} 
</body> #p3{font-size:14px;} 
</style> 
图 3-14 id 和 类 共用 图 3-15 CSS 规则 


一 个 元 素 可 以 使 用 多 个 类 ,一 个 类 可 以 用 于 多 个 元 素 , 听 起 来 有 点 抛 口 , 但 在 实际 中 
频繁 使 用 。 
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3.2 页 面 中 设置 CSS 的 几 种 方式 


在 页 面 中 可 以 用 多 种 方式 引入 CSS, mi A sÉ CSS、 链 接 式 CSS. 行 内 CSS 和 导入 
A CSS, 
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在 前 一 小 节 中 ,是 在 页 面 文档 的 二 head 之 和 一 /head 一 之 间 利 用 二 style 之 标记 引入 CSS, 
这 种 方式 是 租 入 式 CSS, 主 要 用 于 调试 和 CSS 入 门 学 习 用 ,因为 这 种 方式 具有 以 下 弱点 。 

(1) 样式 和 内 容 共 用 一 个 文档 。 

(2) 样式 仅 针对 于 当前 文档 有 效 。 

(3) 若 要 实现 多 个 页 面 风 格 的 统一 ,修改 和 维护 的 工作 量 很 大 。 

不 难看 出 这 些 问 题 产生 的 原因 只 有 一 个 , 即 没 有 实现 样式 与 内 容 的 分 离 。 要 实现 这 
种 分 离 ,可 采用 即将 介绍 的 链接 式 CSS。 
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链接 式 CSS 就 是 将 样式 以 独立 的 文件 存放 ,然后 在 页 面 文件 二 head 之 和 所 /head 盖 
之 间 利 用 过 link 二 标记 引入 CSS 样式 文件 。 

例 3-5 基于 素材 “ch3\exp3_5. html”, 将 页 面 中 嵌入 式 的 CSS 改 为 链接 式 的 CSS, 
实现 样式 与 内 容 的 分 离 。 

实施 步骤 如 下 。 

(1) 打开 素材 “ch3\exp3_5. html”, 将 二 style 二 标记 的 内 容 ( 即 不 包含 开始 标记 
<style> Ht IR PR </style>) 复制 到 一 个 新 文档 ,以 CSS 为 扩展 名 保存 文件 ,如 
myFirst. CSS ,注意 CSS 文件 与 页 面 文件 的 相对 位 置 ,本 例假 设 这 两 个 文件 位 于 同一 文件 夹 。 

(2) 删除 页 面 文件 中 的 二 style 二 标记 。 

(3) 浏览 页 面 ,查看 无 自 定义 样式 的 页 面 效 果 。 

(4) 将 样式 文件 引入 页 面 文件 中 : 回 到 页 面 文件 ,在 二 head 记 和 二 /head 二 中 增加 以 
下 一 行 代码 : 


<link href= "myFirst. CSS" rel="stylesheet" type="text/CSS" media="screen" /> 


挟 link 盖 标记 是 一 个 无 内 容 的 空 标记 ,其 中 : 

© 属性 href 指向 关联 的 CSS 样式 文件 。 

@ rel= "stylesheet" 表 示 是 一 个 样式 表 。 

Q type= "text/CSS" 表 示 文 本 是 一 个 CSS 类 型 文件 。 

@ media="screen" KREA F Web 浏览 器 。 I 

(5) 保存 ,浏览 效果 。 | =? P 

注意 href 属性 关联 的 CSS 样式 文件 是 相对 于 页 面 文件 的 位 = w 
置 ,若是 基于 图 3-16 所 示 的 文件 结构 ,那么 应 该 修改 href 的 值 ， 图 3-16 文件 结构 


a a [ 第 3 章 55 基础 与 必用 实例 FON 


即 为 : href="CSS\myFirst. CSS", 
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行内 CSS 就 是 在 元 素 的 开始 标记 内 利用 style 属性 来 实现 其 表现 效果 ,其 优先 级 别 
最 高 。 如 : 

<p 二 第 一 span style= "font-size:20px; ">3</span> RR </p> 

这 种 样式 一 般 不 建议 采用 ,调试 效果 可 作为 临时 使 用 。 其 特点 是 style 属性 设置 的 样 
式 只 对 其 所 在 标记 内 容 起 作用 ,而 且 不 能 体现 内 容 与 样式 分 离 的 思想 。 

行内 样式 的 蔡 代 方式 就 是 给 指定 标记 增加 一 个 id 或 者 class 属性 来 作为 该 标记 的 唯 
一 定位 ,然后 在 样式 表 文 件 中 利用 id 或 者 class 选择 器 给 其 设置 样式 。 

若 没有 具有 强大 功能 的 选择 器 来 定位 页 面 元 素 , 想 象 一 下 所 有 效果 的 实现 都 必须 依 
赖 于 行内 CSS 的 情形 。 
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导入 式 CSS 就 是 在 页 面 文件 的 二 head 二 标记 的 二 style 二 和 二/style 二 之 间 利 用 
@import 声明 导入 样式 表 文 件 , 要 求 @import 声明 必须 放 在 过 style 二 标记 的 开始 部 分 ， 
若 放 在 其 他 样式 之 后 就 会 被 忽略 。 具 体格 式 如 图 3-17 所 示 。 


<head> 


<style type 一 "text/CSS" > 
@import url(company. CSS); /* 放 在 开始 位 置 * / 
hl { background: yellow; color: #666 } 
</style> 


</head> 


图 3-17 导入 式 CSS 


导入 式 CSS 的 特点 是 在 导入 CSS 样式 文件 的 时 候 , 还 可 以 嵌入 CSS, 当 冲突 发 生 时 ， 
嵌入 式 优先 。 

关于 @import 的 两 点 说 明 如 下 。 

(1) 和 到 link 之 标记 一 样 ,@import 也 是 用 于 关联 外 部 的 CSS 文件 和 XHTML 页 
面 。 体 现 内 容 与 样式 的 分 离 , 但 是 @import 是 一 种 CSS 规则 ,所 以 要 置 于 一 style 之 标记 
之 内 s 

(2) 浏览 器 显示 只 有 @import 指令 而 没有 所 link 之 或 二 script 之 标记 的 页 面 时 ,会 在 
页 面 加 载 瞬 间 显 示 没 有 应 用 CSS 样式 的 页 面 内容 。 


325 各 种 CSS 的 优先 级 


在 本 章 的 开始 就 明确 说 明 CSS 有 两 层 含义 , 即 样 式 表 和 层 倒 。 样 式 表 就 是 一 个 扩展 
名 为 CSS 的 文本 文件 ,其 内 容 是 一 组 CSS 规则 的 集合 , 即 诸如 “选择 器 (属性 1: 属性 值 1; 
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属性 2: 属性 值 2;.…}” 的 CSS 规则 。 

层 和 倒是 一 种 让 浏览 器 决定 对 某 一 元 素 最 终 应 用 哪 条 CSS 规则 的 机 制 。CSS 规则 中 
选择 器 能 体现 层 倒 的 这 些 写意 , 即 当 某 一 个 元 素 的 样式 有 多 处 定义 时 , 按 选择 器 的 “针对 
性 强 为 优先 ”的 原则 决定 最 终 其 作用 的 样式 。 

对 于 处 于 不 同位 置 的 CSS, 同 样 体现 层 肥 的 这 层 富 意 ,其 优先 级 别 从 高 到 低 的 顺序 
Æ: 行内 CSS 优先 级 最 高 ,其 次 分 别 是 嵌入 式 CSS、 链 接 式 CSS 和 导入 式 CSS。 


3.3 CSS 样式 的 分 类 


利用 CSS 样式 对 页 面 元 素 实现 表现 效果 ,众多 的 表现 有 不 同 的 分 类 方法 ,下 面 介绍 
其 中 两 种 分 类 方式 。 


1. 按照 XHTML 元 素 的 表现 效果 (参照 Dreamweaver 的 CSS 样式 对 话 框 ) 分 类 


O 文字 效果 : 主要 属性 有 font-family font-size, line-height, color, font-style, font- 
weight, text-decoration 和 font 复合 属性 等 。 

© 区 块 效果 : 主要 属性 有 text-indent, text-align, letter-spacing, white-space, display 等 。 

© 方 框 效果 : 主要 属性 有 width height, margin, padding 和 float 等 。 

@ 边框 效果 : 主要 属性 有 border-width, border-style, border-color, border 以 及 独立 
边框 复合 属性 等 。 

© 背景 效果 : 主要 属性 有 background-image.background-repeat , background-color, 
background-position 和 background 复合 属性 等 。 

© 列表 效果 : 主要 属性 有 list-style-type.list-style-image 等 。 


2. 按 样式 的 实际 功能 分 类 


@ 与 布局 相关 的 样式 : 主要 属性 有 宽度 (width)、 高 度 (height)、 定 位 (position)、 浮 
动 (float)、 清 除 (clear)、 显 示 (display)、 外 边 距 (margin)、 内 边 距 (padding) 和 边框 
(border) 等 。 

@ 与 颜色 相关 样式 : 主要 属性 有 背景 颜色 .背景 图 片 和 文本 颜色 等 。 

@ 与 文本 区 块 相关 的 样式 : 主要 属性 有 与 字体 相关 的 font, 与 文字 块 相关 的 text- 
indent, text-align 和 列表 相关 的 list-style 等 。 

CSS 是 为 XHTML 文档 添加 样式 的 一 种 机 制 , 其 中 选择 符 是 CSS 的 核心 , 若 没有 选择 
符 , 除 了 将 样式 声明 嵌入 每 个 元 素 中 就 没有 其 他 办 法 将 样式 应 用 到 元 素 上 ,而 通过 选择 符 赋 
予 的 选择 任何 形式 任何 种 类 元 素 的 能 力 就 可 以 利用 很 少 的 几 行 CSS 完成 很 大 一 部 分 样式 
设置 的 工作 。 选 择 符 的 针对 性 是 层 秋 性 的 一 种 体现 ,遵循 “针对 性 越 强 级 别 越 高 ”的 原则 。 

页 面 中 设置 CSS 有 多 种 方式 ,能 体现 内 容 与 样式 分 离 原则 的 有 链接 式 CSS 和 导入 
CSS, 其 中 链接 式 CSS 在 实际 中 最 常用 ,内 容 与 样式 混在 一 起 的 嵌入 式 CSS 和 行内 CSS 
常用 于 页 面 设计 和 调试 阶段 ,行内 CSS 的 优先 级 别 最 高 。 

CSS 中 的 样式 声明 结合 具体 的 实例 在 后 续 章 节 陆 续 学 习 , 就 是 要 了 解 和 掌握 主要 的 
XHTML 元 素 的 常用 属性 和 对 应 的 属性 值 , 然 后 根据 需要 灵活 应 用 。 


选 择 题 
(1) 注释 CSS 代码 所 采用 的 方式 是 ( ) 。 
A. /* 被 注释 的 代码 * / B. // 被 注释 的 代码 
C. “被 注释 的 代码 D. <! -- 被 注释 的 代码 -- 二 
(2) 在 选择 符 中 引用 id 属性 值 的 符号 是 ( Js 
A. 英文 点 号 . B. 英文 # 人 D. - 
(3) 以 下 属于 组 选择 符 的 是 ( )。 
A. divp B. div.p C. div +p D. div * p 
(4) 以 下 属于 后 代 选 择 符 的 是 (  )。 
A. div p B. div.p C. div +p D. div * p 
自主 训练 
练习 3-1: 利用 素材 “ex3\ex3_1. html” ,在 二 style 过 和 二 /style 二 标记 之 间 添 加 合适 


的 样式 实现 以 下 要 求 。 

(1) 将 页 面 中 的 1 级 标题 和 2 级 标题 文本 的 颜色 分 别 设置 为 红色 和 蓝 色 。 

(2) 将 二 span 二 标记 和 二 a 二 标记 的 字体 大 小 (fontrsize) 设 置 为 26px( 对 应 样式 
tfont-size:26px; ) ,颜色 为 #03f( 对 应 样式 color: 井 03f; ) 。 

(3) 将 页 面 中 的 所 有 列表 项 文本 的 颜色 设置 为 绿色 。 

(4) 所 有 p 标记 的 颜色 是 灰色 #777 。 

(5) 取消 页 面 中 二 a 二 标记 文本 的 下 划 线 (对 应 样式 textrdecoration:none; ) 。 

练习 3-2: 利用 素材 “ex3\ex3_2. html”, 给 元 素 添加 合适 的 属性 和 在 二 style 之 和 
三 /style 二 标记 之 间 添 加 合适 的 样式 实现 以 下 要 求 。 

(1) 将 页 面 中 的 1 级 标题 和 2 级 标题 文本 的 颜色 设置 为 红色 。 

(2) 将 紧 跟 标 题 的 段落 颜色 设置 为 #f6f。 

(3) 让 列表 项 中 的 奇数 项 和 偶数 项 的 颜色 分 别 为 #666 和 #03f。 

(4) 让 “我 校 与 马来西亚 …… ”所 在 的 1 级 标题 文本 居中 对 齐 (textralign:center; ) 。 

(5) 让 “战略 合作 协议 签约 ”所 在 的 2 级 标题 字体 大 小 为 40px。 

(6) 将 二 span 二 标记 和 三 a 二 标记 的 字体 大 小 (font-size) 设 置 为 26px( 对 应 样式 font- 
size:26px;) ,颜色 为 #03f( 对 应 样式 color: #03f;)。 

练习 3-3: 利用 素材 “ex3\ex3_3. html”, 实 现 以 下 要 求 (注意 设置 样式 前 、 后 页 面 效 果 
的 对 比 ) 。 

(1) 利用 通用 选择 器 * 取消 页 面 所 有 元 素 的 外 边 距 和 内 边 距 ,字体 大 小 为 13px。 

(2) 取消 所 有 列表 的 符号 或 者 编号 (list-style-type: none) 。 

(3) 将 当前 的 嵌入 式 CSS 改 为 链接 式 CSS, 即 将 页 面 中 的 样式 以 独立 文件 myex. 


| < Ç ° > [ XHTML+[55 网 页 设计 与 制作 实例 教 和 | — — 


CSS 保存 ,然后 在 页 面 中 利用 一 link 之 标记 引入 样式 。 
(4) 利用 行内 样式 将 最 后 一 个 列表 项 的 文本 大 小 设置 为 20px, 颜 色 是 红色 。 


综合 填空 题 


参考 图 3-18 一 图 3-21 ,对 图 (a) 代 码 片段 应 用 图 (b) 的 CSS 规则 ,完成 (1) 一 (11) 题 的 


<body> <head> 


<title>CSS H BÆR < /vitle> 
<style type= "text/CSS"> 
* (font-size: 20px; } 


<span id= "id3" >J font-size? </span> 
<span class= "class3" >R HY font-size? </span> 


sw .Class3 {font-size: 12px ;} 
</body> </style> 


(a) 代码 片段 
图 3-18 代码 片段 和 CSS 规则 A 


(b) CSS 规则 A 


(1) 第 1 S <Cspan> iU 809 FEKE: 
(2) 第 2 A< span> Bi $E K Ke; 
(3) 判断 的 规则 是 : 


<head> 
<title>CSS 的 层 公 规则 < /title> 

<body> <style type= "text/CSS"> 

#id3 (font-size: 25px ;) 

.class3 (font-size: 18px ;) 

span {font-size:12px} 

</style> 

</head> 


(b) CSS 规则 B 


<span id= "id3" >J ñf font-size? </span> 
<span class= "class3"> RHY font-size? </span> 


</body> 


(a) 代码 片段 
图 3-19 代码 片段 和 CSS 规则 B 


(4) 第 1 个 二 span 二 标记 内 容 的 字体 大 小 是 : 


(5) 第 2 个 二 span 二 标记 内 容 的 字体 大 小 是 : 
(6) 判断 的 规则 是 : 


<head> 
<title>CSS HREH </title> 
<body> <style type= "text/CSS"> 
span # id3 (font-size: 18px} 
#id3 (font-size: 12px} 
span. class3 (font-size: 18px} 
-class3 (font-size: 12px} 
</style> 


<span id="id3" >R h font-size? </span> 


<span class= "class3" >R H font-size? </span> 


</body> 


(a) 代码 片段 
图 3-20 ”代码 片段 和 CSS 规则 C 


(b) CSS 规则 C 


(7) 第 1 个 二 span 之 标记 内 容 的 字体 大 小 是 : ° 
(8) 第 2 +-—span—— Ei $E ñ F IK K]; x" 
(9) 判断 的 规则 是 : š 


<body> 
<head> 
<title>CSS ñ 2 88 81 |< /vitle> 
<style type= "text/CSS"> 
-classl .class2 .class3 
(font-size: 25px ;) 
.class2 .class3 (font-size: 18px; } 
.class3 (font-size: 12px ;) 
</style> 


(a) 代码 片段 (b) CSS 规则 D 
图 3-21 代码 片段 和 CSS 规则 D 


<div class= "class1"> 
<p class= "class2"> 
<span class=" class3" >R ÉY font-size? 
</span> </p> 
</div> 


</body> 


(10) <span> HRA AH FEKE: Š 
(11) 判断 的 规则 是 : š 


从 本 章 开始 讲解 具体 的 CSS 样式 对 页 面 表现 的 控制 ,页 面 的 核心 是 围绕 主题 的 内 
容 , 这 些 内 容 在 逻辑 上 是 相关 的 ,在 物理 上 的 布局 也 是 为 了 更 好 地 体现 这 种 内 容 的 相 
关 性 。 

现在 回顾 一 下 XHTML 的 块 标记 (或 块 元 素 ) 和 行内 标记 (行内 元 素 ) 的 区 别 : 即 在 
浏览 器 的 默认 样式 下 根据 标记 内 容 是 否 另 起 一 行 来 区 分 ,如 过 p 二 .二 hl 二 一 二 h6 二 、 
< ul 二 li 一 等 是 块 标 记 , 而 二 a 之 和 二 span 之 等 是 行内 标记 。 

页 面 的 主要 结构 从 上 至 下 是 页 眉 .正文 和 页 脚 ,这 些 部 分 通常 是 利用 过 div 之 标记 来 
进行 组 织 , 定 位 和 分 栏 利 用 浮动 (float) 属 性 、 清 除 (clear) 属 性 、 显 示 (display) 属 性 和 定位 
(position) 来 设置 ,布局 是 利用 宽度 (width) 、 高 度 (height) 、 外 边 距 (margin) 属 性 和 内 边 距 
(padding) 属 性 来 设置 ,所 以 网 页 设计 师 为 了 实现 一 个 布局 精美 的 页 面 效果 ,需要 花 很 多 
时 间 对 这 些 属 性 的 属性 值 进行 调整 。 对 于 初学 者 而 言 .首先 要 清楚 这 些 属性 ,也 就 是 本 章 
的 核心 内 容 。 

为 方便 讲解 ,采用 嵌入 式 CSS, 同 时 为 了 取消 浏览 器 之 间 默 认 样 式 的 差异 ,利用 
“x {margin:0;padding:0;)” 的 CSS 规则 取消 所 用 元 素 的 外 边 距 和 内 边 距 (浏览 器 给 块 
标记 设置 了 默认 的 外 边 距 和 内 边 距 ) 。 


4.1 认识 和 理解 盒子 模型 


- 切 皆 为 盒子 , 即 XHTML 标记 中 的 每 个 元 素 在 页 面 中 都 会 产生 一 个 盒子 ,页 面 实 
际 上 就 是 盒子 排列 的 结果 ,因此 盒子 模型 是 CSS 中 的 一 个 重要 概念 。 

每 个 盒子 从 内 到 外 有 : 内 容 、 内 边 距 (填充 ) ,边框 ,边界 (外 边 距 ) 四 个 部 分 ,如 图 4-1 
所 示 。 

CSS 盒子 模型 中 的 “盒子 "可 以 理解 为 HTML 每 一 个 元 素 的 直观 描述 , 即 二 hl 二 ~ 
</h6> .<div> .<ul> ,二 img 这 和 二 p 二 等 标记 都 可 以 用 “盒子 ”来 形象 表示 ,只 是 在 默 
认 样 式 下 每 个 元 素 盒子 的 边框 是 不 可 见 的 (对 应 的 CSS 规则 是 : (border: medium black 
none; ) ) ,盒子 的 背景 也 是 透明 的 ,所 以 至 此 为 止 还 不 能 将 HTML 元 素 与 其 对 应 的 “ 盒 
子 ” 形 象 关联 起 来 。 如 果 给 元 素 添加 设置 边框 线 型 或 者 背景 颜色 的 CSS 规则 ,HTML 元 
素 的 “盒子 ”形象 就 呈现 了 ,这 样 就 可 以 从 一 个 新 的 角度 来 重新 认识 HTML 元 素 , 而 这 种 
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图 4-1 盒子 模型 


认识 是 利用 CSS 进行 网 页 布局 的 基础 ,而 清晰 理解 和 灵活 应 用 盒子 模型 的 相关 属性 是 利 
用 CSS 进行 页 面 布局 的 具体 实现 。 

使 用 CSS 可 以 调整 元 素 盒子 的 4 个 方面 如 下 。 

(1) 内 容 空间 : 设置 盒子 内 容 的 宽度 和 高 度 。 

(2) 内 边 距 padding: 设置 盒子 中 内 容 与 边框 之 间 的 距离 ,或 者 说 从 边框 开始 向 内 推 
开元 素 中 的 内 容 。 

(3) 边框 border; 设置 盒子 边框 的 厚度 .颜色 和 线 型 。 

(4) 外 边 距 margin; 设置 盒子 边框 与 相 邻 元 素 之 间 的 距离 ,或 者 说 从 边框 开始 向 外 
推 开 相 邻 元 素 。 


411 盒子 内 容 


将 一 个 HTML 元 素 理解 为 一 个 盒子 ,那么 盒子 模型 的 内 容 部 分 是 指 这 个 HTML 元 
素 的 元 素 内 容 ( 如 所 p 过 元素 和 所 hl 二 元 素 的 元 素 内 容 ) 或 者 子 元 素 ( 如 二 口 过 元素 中 
<l> TKA HTML 元 素 舱 套 的 子 元 素 ) 。 

在 盒子 模型 中 ,内容 部 分 的 相关 属性 是 width 和 height。 默 认 样 式 下 内 容 宽度 为 其 
所 在 父 容 器 的 宽度 ( 即 width: 100% ;) ,高 度 是 内 容 自 适应 。 设 置 width 的 几 种 方式 
如 下 。 

(1) 默认 情形 ,与 所 在 父 容器 等 宽 。 

(2) 固定 宽度 ,如 width:300px; 设 置 宽度 为 300px。 

(3) 相对 宽度 ,如 width:30% ;设置 宽 度 为 所 在 父 容器 宽度 的 30%。 


412 内 边 距 


内 边 距 (padding) 用 于 控制 内 容 与 边框 之 间 的 空间 ,在 边框 的 内 部 ,所 以 若 为 盒子 元 
素 设置 背景 ,内 边 距 会 带 有 背景 。 内 边 距 的 设置 在 上 、 下 、 左 、 右 四 个 方向 的 间距 ,大 小 可 
一 致 也 可 不 一 致 ,对 应 地 CSS 中 控制 上 、 下 、 左 、 右 四 个 方向 内 边 距 的 属性 分 别 是 
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padding-top, padding-bottom, padding-left\padding-right, 单 独 为 元 素 的 4 个 方向 编写 内 
边 距 给 人 一 种 不 简洁 的 印象 ,CSS 为 此 提供 了 一 种 简写 方式 , 即 利用 padding 属性 在 一 条 
声明 中 逐个 列 出 这 4 个 方向 的 值 。 像 padding 这 种 在 “一 条 声明 中 能 包含 多 个 属性 值 ”的 
属性 称 为 复合 属性 ,与 之 对 应 的 “一 条 声明 中 只 能 包含 一 个 属性 值 ” 的 属性 称 为 单 属性 ,为 
使 代码 简洁 和 优化 ,在 实际 中 建议 尽量 采用 复合 属性 ,后 续 还 会 陆续 学 习 其 他 复合 属性 。 

例如 ,给 padding 设置 4 个 属性 值 ,表示 从 上 内 边 距 开始 ,按照 < 上 右 下 左 ? 顺 时 针 方 
向 依次 设 定 4 个 方向 的 内 边 距 , 它 等 价 于 4 条 单独 的 CSS 规则 ,具体 如 图 4-2 所 示 。 


padding-top:10px; 
padding: 10px 5px 15px 20px; Kam E De 
padding-left:20px; 

(a) 复合 属性 (b) 单 属性 
图 4-2 padding 复合 属性 与 相应 单 属性 的 对 应 关系 


图 4-2 表示 上 、 右 、 下 和 左 内 边 距 分 别 为 10px、5px、15px 和 20px, 采 用 padding 复合 
属性 时 要 注意 以 下 几 点 。 

(1) 属性 值 之 间 只 有 一 个 空格 隔 开 。 

(2) 按照 CSS 规定 : padding 属性 值 的 方向 是 "上 右 下 左 ? 顺 时 针 方向 ,这 种 方向 性 的 
特点 同样 适合 于 盒子 模型 中 的 其 他 复合 属性 ,如 margin, border-color, border-width, 
border-style, 

(3) 给 padding 设置 3 个 值 ,省 略 的 是 左 内 边 距 ,表示 它 与 右 内 边 距 相同 。 如 : 
“padding: 10px 5px 15px;” 表 示 上 、 右 、 下 内 边 距 分 别 为 10px、5px、15px, 而 左 内 边 距 与 
右 内 边 距 相同 ,也 是 5px。 

(4) 给 padding 设置 2 个 值 ,省 略 的 是 下 内 边 距 和 左 内 边 距 ,表示 上 、 下 方向 的 内 边 
距 相 同 , 左 、 右 方向 的 内 边 距 相 同 。 如 “padding: 2px 4px;” 表 示 上 、 下 方向 的 内 边 距 为 
2px, 左 、 右 方向 的 内 边 距 为 4px。 

(5) 给 padding 设置 1 个 值 ,省 略 的 是 下 内 边 距 、 左 内 边 距 和 右 内 边 距 ,表示 4 个 方向 
的 内 边 距 都 相同 ,如 padding: 2px。 

那么 单 内 边 距 属性 什么 时 候 使 用 呢 ? 一 般 用 于 覆盖 复合 属性 中 的 某 一 个 属性 值 ,如 
给 某 个 盒子 元 素 设置 如 下 的 CSS 规则 : 


{ 


padding :2px; 
padding-top:0; 
) 


表示 该 盒子 的 没有 上 内 边 距 ,其 余 三 个 方向 的 内 边 距 均 为 2px, 当 然 这 个 要 求 也 可 用 声明 
{ padding: 0 2px 2px; } 或 者 { padding: 0 2px 2px 2px;} ,所 以 理解 了 规则 ,应 用 起 来 就 
比较 自如 了 。 


413 边框 
边框 (border) 用 于 设置 边框 的 宽度 、 颜 色 和 线 型 ,也 是 属于 复合 属性 , 即 当 4 条 边 的 


宽度 .颜色 和 线 型 都 相同 时 ,可 用 border 来 设置 , 当 4 条 边 不 尽 相同 时 ,每 条 边框 是 可 单 
独 设置 的 ,对 应 的 有 border-top border-right , border-bottom 和 border-left 这 4 个 分 别 用 
于 单独 设置 上 边框 、 右 边框 下 边框 和 左边 框 的 宽度 、 颜 色 和 线 型 的 复合 属性 。 

以 border-top 为 例 来 说 明 , 图 4-3 说 明 border-top 复合 属性 与 相应 单 属性 的 对 应 
关系 。 


border-top-color:#fof; 
border-tip:#fof 2px dashed; K 等 价 于 > boder-top-width:2px; 
border-top-style:dashed; 


(a) 复合 属性 (b) 单 属 性 
图 4-3 border-top 复合 属性 与 相应 单 属性 的 对 应 关系 


border-color , border-width , border-style 也 是 复合 属性 ,分 别 用 于 设置 边框 的 颜色 、 
宽度 和 线 型 。 

border-color 用 来 设置 各 条 边框 的 颜色 ,对 应 的 4 个 单 属性 分 别 是 border-top-color、 
border-right-color、 border-bottom-color 和 border-left-color。 和 padding 一 样 , border- 
color 的 属性 值 可 以 是 4 个 .3 个 .2 个 或 者 1 个 ,与 各 单 属性 的 对 应 关系 同样 遵循 “上 右 下 
左 ” 的 方向 ,只 是 具体 的 属性 值 是 颜色 。 图 4-4 说 明了 border-color 具有 4 个 属性 值 时 与 
各 单 属性 的 对 应 关系 。 


border-top-color:red; 


-N| boder-right-color:green; 
border-color:red green blue ge 等 价 于 BO boto CGn le: 


border-left-color:grey; 
(a) 复合 属性 (b) 单 属 性 
E 4-4 border-color 复合 属性 与 相应 单 属性 的 对 应 关系 


border-width 用 于 设置 各 条 边框 的 宽度 ,对 应 的 4 个 单 属性 分 别 是 border-top- 
width.border-right-width.border-bottom-width 和 border-left-width, 只 是 属性 值 表示 宽 
度 , 其 余 规则 与 padding 和 border-color 相同 。 

border-style 用 于 设置 各 条 边框 的 线 型 ,对 应 的 4 个 单 
属性 分 别 border-top-style、border-right-style、border- 
bottom-style 和 border-left-style, 其 可 用 的 属性 值 和 对 应 
的 效果 如 图 4-5 所 示 。 

在 默认 的 样式 下 ,边框 线 型 border-style 的 属性 值 是 
none, 所 以 边框 不 会 显示 。 要 使 HTML 元 素 呈 现 盒子 的 表 
现 效 果 的 最 快捷 方式 是 为 其 添加 诸如 {border: solid; } 或 者 
{border-style:solid;} 的 CSS 规则 。 

由 于 边框 有 颜色 、 宽 度 和 线 型 这 些 属性 ,可 单 边 设置 
也 可 利用 对 应 的 单 属性 来 设置 每 条 边 的 某 一 个 属性 值 , 共 ee 
有 20 个 属性 ,这 么 多 属性 可 对 边框 进行 精确 的 设置 使 其 更 “” 
富有 表现 力 ,实际 应 用 中 通常 是 按照 * 先 整体 后 局 部 ”原则 mas 线 型 的 属性 值 及 效果 
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来 设置 , 即 按 照 border, border-top ( border-right , border-bottom 或 border-left)、border- 
color(border-width 或 border-style) ,最 后 是 各 种 单 属 性 。 

大 多 数 主流 浏览 器 对 边框 的 默认 样式 是 : 只 对 二 img 二 默认 状态 是 没有 边框 的 
标记 显示 一 个 线 宽 为 1px, 颜 色 是 黑色 , 线 型 是 实 线 ( 即 按 MAE 
border: lpx black solid 的 规则 ) 的 边框 ,对 其 他 元 素 是 不 显 
示 边 框 的 ,所 以 车 要 让 元 素 标记 显示 边框 需 对 其 设置 相应 
的 CSS 规则 。 

例 4-1 基于 素材 “ch4\exp4_1. html”, 设 置 合 适 的 边 
框 样式 ,实现 如 图 4-6 所 示 的 效果 。 图 4-6 例 4_1 的 边框 效果 

例 4-1 配套 素材 “ch4\exp4_1. html” 文 件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> # FRAK up É <— /title> 
<style type="text/css" > 
* {margin: 10px; } 
div{ 
width:280px; 
height:22px; 
text-align: center; 
background: # ddd; 
) 
div{border:2px black solid; } 
</style> 
</head> 


<body> 
<h2> BA 12536 B: # uy E ñi) < /h22> 
<div id="d1"> 四 边框 有 相同 的 效果 </div> 
<div id="d2"> 只 有 下 边框 的 线 宽 、 颜 色 和 线 型 不 同 </div> 
<div id 二 "d3" 上 下 边框 与 左右 边框 的 线 宽 不 同 < /div> 
<div id="d4"> 只 有 左边 框 和 上 边框 的 效果 </div> 
<div id="d5"> 没有 上 边框 的 效果 </div> 

</body> 

</html> 


实现 过 程 如 下 。 

(1) 利用 Dreamweaver 打开 素材 exp4_1. html( 最 好 是 利用 站 点 来 管理 文件 ,以 下 同 )。 

(2) 浏览 页 面 效果 ,熟悉 HTML 代码 。 

(3) 根据 图 4-6 的 要 求 灵活 利用 和 边框 设置 相关 的 属性 ,参考 的 CSS 的 规则 如 图 4-7(b) 
所 示 。 


<h2> 上 默认 状态 是 没有 边框 的 <h2> 
<div id="d1"> 四 边框 有 相同 的 效果 </div> 
<div id="d2"> 只 有 下 边框 的 线 宽 、 颜 色 和 线 型 不 同 


</div> 
<div id="d3"> 上 下 边框 与 左右 边框 的 线 宽 不 同 </div> 
<div 4"> 只 有 左边 框 和 上 边框 的 效果 </div> 


<div id="d5"> 没有 上 边框 的 效果 <div> 
(a) 部 分 HTML 代 码 


div{border:2px black solid; } 
#d2 {border-bottom: 4px #f0f dashed: } 
#d3{border-width: 1px 6px; } 
#d4{border-width:1px 0 0 1px; } 
#d5 {border-top-width:0 ; } 


(b) Css 代 码 
图 4-7 ”代码 与 规则 对 照 图 
关于 设置 盒子 边框 的 几 点 说 明 如 下 。 


(1) 只 有 当 边 框 的 宽度 不 为 0 且 边 框 线 型 不 为 none 或 者 hidden 时 ,才能 显示 边框 。 
(2) 当 针 对 性 一 致 时 ,后 面 的 规则 覆盖 前 面 的 规则 。 如 顺 次 有 诸如 以 下 的 CSS 规则 : 


# d5(border-top-width:0 ; } 
# d5(border:2px black solid; } 


W # d5 对 应 元 素 的 四 周 会 有 边框 。 
(3) 边框 设计 对 应 Dreamweaver CSS 规则 对 话 框 的 “边框 ”选项 卡 ,如 图 4-8 所 示 。 


园 全 部 相同 (S) 国 全 部 相同 (F) 辆 全 部 相同 (0) 
l Top(T) : ` = 区 
PR Right (R) : X ~] 区 


Bettea(B) : — =] 匠 


Left() : 


vlpx 


图 4-8 Dreamweaver 的 “边框 ?选项 卡 


414 外 边 距 


外 边 距 (margin) 用 于 设置 盒子 边框 与 其 相 邻 元 素 之 间 的 空间 ,是 复合 属性 ,对 应 的 
4 个 单 属 性 分 别 是 margin-top, margin-right, margin-bottom 和 margin-left。 和 padding 
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一 样 ,margin 的 属性 值 可 以 是 4 个 3 个 2 个 或 者 1 个 ,与 各 单 属性 的 对 应 关系 同样 遵循 
“上 右 下 左 ” 的 方向 。 

关于 “margin:0 auto; "样式 声明 的 说 明 : 该 声明 表示 给 元 素 的 右 外 边 距 margin-right 
和 左 外 边 距 margin-left 都 设置 auto 的 属性 值 ,而 且 在 该 元 素 具 有 一 定 宽度 的 前 提 下 , 浏 
览 器 就 会 取 该 元 素 所 在 父 容 器 的 宽度 和 该 元 素 的 宽度 之 差 除 以 2 后 分 别 应 用 在 元 素 的 
左 / 右 外 边 距 ,这 样 让 元 素 在 容器 中 产生 居中 的 效果 ,常常 用 于 整个 页 面 在 浏览 器 的 居中 ， 
这 点 在 后 面 的 实例 中 会 大 量 用 到 。 

外 边 距 margin 和 内 边 距 padding 对 应 Dreamweaver CSS 规则 对 话 框 的 “ 方 框 ” 选 项 
卡 ,如 图 4-9 所 示 。 


nan : Í 了 区 Float(TD) : ` 


Height (H) : -o Clear(c) : ` 
Padding Margin 

贺 全 部 相同 (S) 园 全 部 相同 (r) 

Top(P) : ~ [p Top(0) : = 区 

Right (R) : +] Right(c) : `] >= 

Bottoa(B) : ~) pz Bottoa0D : ~] 匠 

Left() : 了 区 Left GE) : v] 


图 4-9 Dreamweaver 的 “ 方 框 ”选项 卡 


在 默认 样式 下 ,浏览 器 会 给 不 同 的 块 级 元 素 设置 不 同 大 小 的 外 边 距 , 即 过 hl 之 和 
去 p> 元 素 具 有 不 用 的 默认 外 边 距 ; 同时 不 同 的 浏览 器 还 会 为 诸如 列表 元 素 和 表单 元 素 
等 设置 不 同 的 外 边 距 和 内 边 距 ,所 以 为 了 取消 这 些 默 认 的 外 边 距 /内 边 距 或 者 “ 抹 平 ?这 些 
浏览 器 之 间 的 差异 ,再 一 次 建议 在 样式 表 的 顶部 利用 通配符 x 针对 页 面 的 所 有 元 素 的 外 
边 距 / 内 边 距 进行 一 次 初始 化 设置 : 


* {padding:0; margin:0;} 


至 此 ,与 盒子 模型 相关 的 属性 介绍 完毕 , 接 下 来 的 例 4-2 和 例 4-3 可 帮助 读者 加 深 对 
这 些 属性 的 理解 和 应 用 。 

例 4-2 基于 素材 *ch4\exp4_2. html”, 按 照 要 求 设置 合适 的 CSS 样式 ,实现 如 图 4-10 
所 示 的 效果 。 要 求 如 下 。 

(1) 3 个 div 的 大 小 相同 , 宽 和 高 分 别 为 200px 和 60px; 边框 为 5px, 线 型 是 实 线 , 颜 
色 自 定 。 

(2) 1 号 div 的 左边 距 为 15px。 

(3) 2 号 div 与 1 号 div 右 靠 齐 。 

(4) 3 5 div 5 2 5 div 左 靠 齐 。 


1 号 div: 
宽 : 200px; 高 :60px 
边框 厚 5px; 左边 框 : 15px| 

2 号 div: 
宽 、 高 和 边框 与 1 号 div 相 同 
位 置 与 1 号 div 右 对 齐 


图 4-10 例 4-2 效果 
例 4-2 配套 素材 “ch4\exp4_2. html” 文 件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> I AAEM #F3B BE E< /title> 
<style type="text/css" > 
* (margin:0; padding:0; } 
</style> 
</head> 


<body> 


<div class="d1"> 
1 号 div: <br /> 
宽 :200px; 高 : 60px<br /> 
边框 厚 :5px; 左边 距 :15px; 
</div> 
<div class="d2"> 
2 号 div: <br /> 
宽 、 高 和 边框 与 1 号 div 相同 <br /> 
位 置 与 1 号 div 右 对 齐 
</div> 
<div class="d3">3 号 div: <br /> 
宽 、 高 和 边框 与 1 号 div 相同 <br/> 
位 置 与 2 号 div 左 对 齐 
</div> 
</body> 
</html> 


实现 过 程 如 下 。 
(1) 打开 素材 exp4_2. html, 熟 悉 HTML 代码 。 
(2) 按照 例题 的 逐条 要 求 , 写 出 相应 的 CSS 规则 ,并 查看 浏览 效果 。 


(3) 对 照 效 果 调 整 相关 元 素 的 边框 和 外 边 距 的 属性 值 , 参 考 的 CSS 的 规则 如 图 4-11(b) 
所 示 。 
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<div class="d1"> 
1 号 div: <br > 
宽 :200px: 高 : 60px<br /> - 
边框 厚 :5px; 左边 距 :15px; div{ 
</div> width:200px; 
<div class="d2"> height:60px: 
25 div: <br/> border:5px #03c solid; 
宽 、 高 和 边框 与 1 号 div 相 同 } 
<br /> dlf 
位 置 与 1 号 div 右 对 齐 margin-left:1 5px; 
</div> } 
<div class="d3">3 号 div: <br > .d2,.d3{ 
宽 、 高 和 边框 与 1 号 div 相 同 margin-left:224px; 
<br > si 
立 置 与 ?号 div 左 对 j : 
ass S border-top-width:0; 
} 
(a) 部 分 HTML 代 码 (b) CSS 规 则 


图 4-11 代码 与 规则 对 照 图 


说 明 : 

Q) 要 保证 2 号 div 与 1 号 div 右 靠 齐 ,在 设置 2 号 div 的 左 外 边 距 时 要 考虑 1 号 div 
的 左 外 边 距 \ 左 边框、 宽度 和 右边 框 。 

(2) 2 号 div 与 3 号 div 共享 一 个 边框 , 需 对 其 进行 局 部 调整 。 只 要 符合 “2 号 div 下 
边框 厚度 十 3 号 div 上 边框 厚度 二 5px” 的 原则 即 可 。 

(3) 为 了 使 各 div 的 区 域 更 明显 ,可 以 给 各 div 设置 不 同 的 背景 色 。 如 将 背景 色 设置 
为 红色 ,其 对 应 的 CSS 规则 是 “background-color:red;”。 

例 4-3 基于 素材 “ch4\exp4_3. html”, 按 照 要 求 设置 合适 的 CSS 样式 ,实现 如 
图 4-12 所 示 的 效果 。 要 求 如 下 。 

(1) 3 个 div 的 大 小 相同 , 宽 和 高 分 别 为 
200px 和 60px; 有 边框 的 地 方 厚度 均 为 5px， 
线 型 是 实 线 , 颜 色 自 定 。 

(2) 1 号 div 和 3 号 div 的 内 边 距 均 为 
5px,2 号 div 无 内 边 距 。 

(3)1 号 div 和 3 号 div 的 左边 距 均 图 4-12 例 4-3 效 果 
为 15px。 

(4) 2 号 div 与 1 号 div 左 靠 齐 。 

例 4-3 配套 素材 “ch4\exp4_3. html” 文 件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 

<html xmlns= "http://www. w3.org/1999/xhtml"> 

<head> 

<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 

<<title> 练 习 盒子 模型 的 相关 属性 一 /title> 

<style type= "text/css" > 


1 号 div: 内 边 距 均 为 5px 


2 号 div: 无 内 边 距 


3 号 div: 内 边 距 均 为 5px 


* (margin:0;padding:0;) 
</style> 
</head> 


<body> 
<div class="d1"> 
1 号 div: 内 边 距 均 为 5px 


</div> 
<div class="d2"> 
2 号 div: 无 内 边 距 
</div> 


<div class="d3"> 
3 div: 内 边 距 均 为 5px 
</div> 
</body> 
</html> 


实现 过 程 如 下 。 

(1) 打开 素材 exp4_3. html, 熟 悉 HTML 代码 。 

(2) 按照 例题 的 逐条 要 求 , 写 出 相应 的 CSS 规则 ,并 查看 浏览 效果 。 

(3) 对 照 效 果 调整 相关 元 素 的 边框 和 外 边 距 的 属性 值 ,部 分 参考 的 CSS 的 规则 如 
图 4-13(b) 所 示 。 


div{ 
width:200px; 
height:60px; 
border:5px #03c solid; 
1 
.d1..d3{ 
padding:5px; 
* margin-left:15px; 
<div class="d1"> 
1 号 div : 内 边 距 均 为 5px .d2{ 
</div> margin-left:230px; 
<div class="d2"> border-left-width:0; 
2 号 div : 无 内 边 距 
div> alt 1 
<div class="d3"> border-bottom-width:0; 
35 div: 内 边 距 均 为 Spx 
div> border-top-width:0; 
j } 
(a) 部 分 HTML 代 码 (b) CSS 规 则 


图 4-13 ”代码 与 规则 对 照 图 


说 明 : 

(1) 效果 图 中 1 号 div 下 边框 和 3 号 div 的 上 边框 要 单独 设置 。 

(2) 要 保证 2 号 div 与 1 号 div 右 靠 齐 , 在 设置 2 号 div 的 左 外 边 距 时 要 考虑 1 号 div 
的 左 外 边 距 、 左 边框 、 左 内 边 距 、 宽 度 和 右 内 边 距 ,这 些 都 是 影响 2 号 div 左 外 边 距 的 
因素 。 
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使 用 CSS 进行 网 页 设计 和 布局 时 很 多 的 调整 工作 都 是 在 处 理 外 边 距 、 内 边 距 宽度 
这 些 与 盒子 模型 相关 的 属性 。 


415 盒子 到 底 有 多 大 


许多 初学 者 对 盒子 元 素 到 底 有 多 大 总 是 有 点 含混 不 清 , 现 在 分 两 种 情形 讨论 这 个 
问题 。 

情形 一 : 未 给 盒子 元 素 设 定 宽度 (这 里 主要 针对 块 级 元 素 ), 即 没有 给 元 素 的 width 
属性 设 定 一 个 值 。 

(1) 块 级 元 素 盒子 的 宽度 会 扩展 到 与 其 父 元 素 等 宽 ( 行 内 元 素 盒子 的 内 容 宽度 会 与 
其 包含 的 内 容 自 适应 )。 

(2) 车 给 块 级 盒子 元 素 添 加 水 平 外 边 距 , 会 导致 块 级 元 素 盒子 的 内 容 宽 度 变 窄 。 

O 若 再 给 块 级 盒子 元 素 添 加 水 平 边框 ,会 导致 块 级 元 素 盒子 的 内 容 宽度 变 得 更 罕 。 

(4) 若 再 给 块 级 盒子 元 素 添加 水 平 内 边 距 ,会 导致 块 级 元 素 盒子 的 内 容 宽度 变 得 

情形 二 : 给 盒子 元 素 设 定 宽度 , 即 给 元 素 的 width 属性 设 定 一 个 值 。 

(1) width 属性 值 的 大 小 是 盒子 内 容 的 宽度 ,而 不 是 盒子 本 身 的 宽度 。 

(2) 若 给 盒子 元 素 设置 水 平 内 边 距 会 导致 盒子 变 宽 。 

(3) 若 给 盒子 元 素 设置 水 平 边框 会 导致 盒子 变 得 更 宽 。 

(4) 若 给 盒子 元 素 添 加 外 边 距 ,会 在 元 素 盒子 周围 创建 空白 区 域 。 

所 以 要 清楚 元 素 (这 里 主要 针对 块 级 元 素 ) 在 默认 宽度 和 设置 了 width 属性 这 两 种 不 
同情 形 下 ,内 /外 边 距 和 边框 对 盒子 宽度 和 盒子 内 容 宽度 的 影响 ,因为 这 些 都 是 影响 布局 
的 重要 因素 。 


4.2 影响 布局 的 float 属性 和 clear 属性 


上 一 小 节 的 练习 中 ,大 家 可 能 注意 到 了 一 个 这 样 的 现象 : 每 个 div 都 是 另 起 一 行 ,而 
且 只 设置 了 其 左 外 边 距 。 这 是 因为 以 div 为 代表 的 块 元 素 ( 还 有 hl 一 h6 .p、ul 等 ), 都 有 
一 个 默认 的 诸如 “float:none;” 的 CSS 规则 在 起 作用 ,这 个 规则 产生 的 效果 就 是 “元 素 不 
浮动 ,显示 其 在 文档 流 中 的 正常 位 置 ”。 


421 float 属性 及 应 用 


float 翻译 成 浮动 ,其 作用 是 将 元 素 从 正常 的 文本 流 中 * 抽 离 ”, 以 实现 元 素 的 按 需 移 
动 ,而 紧 随 它 后 面 的 元 素 会 在 空间 充足 的 条 件 下 向 上 移动 环绕 在 浮动 元 素 的 左边 或 右边 。 

float 属性 的 属性 值 及 作用 如 下 。 

(1) left: 元 素 向 左 浮动 。 

(2) right: 元 素 向 右 浮 动 。 

(3) none: 默认 值 。 元 素 不 浮动 ,显示 其 在 文档 流 中 应 出 现 的 位 置 。 

所 谓 浮 动 元 素 是 指 设置 了 “(float:left;}” 或 者 "(float: right; )”CSS 规则 的 元 素 。 若 
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按 元 素 默认 的 float 属性 值 none, 元 素 是 按 其 在 XHTML 代码 的 前 后 顺序 显示 的 , 若 要 改 
变 这 种 顺序 ,可 利用 浮动 属性 实现 文本 环绕 图 像 的 图 文 混 排 效果 或 者 创建 多 栏 布局 。 例 
如 ,浮动 图 像 时 ,文本 环绕 图 像 ; 而 同时 浮动 段落 文本 并 给 其 设置 一 定 宽度 时 ,文本 环绕 
效果 消失 而 呈现 两 栏 的 布局 ,所 以 灵活 应 用 float 属性 是 利用 CSS 进行 网 页 设计 和 布局 
的 关键 技能 之 一 。 这 对 于 刚 入 门 的 读者 不 太 好 理解 ,下 面 用 实例 进行 对 比 说 明 。 

例 4-4 基于 素材 “ch4\exp4_4. html”, 设 置 div 元 素 的 float 属性 分 别 实现 如 图 4-14 
所 示 的 效果 。 


号 div : 左 浮动 
[° : 280px ,高 : 80px 


(e) 1 号 div 和 2 号 div 都 浮动 的 效果 
图 4-14 三 种 情形 浏览 效果 对 比 图 
例 4-4 配套 素材 *ch4\exp4_4. html” 文 件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> MAMAK F 3) JW pE<— /vitle> 
<style type="text/css" > 
* {margin:0; padding :0; } 


div{ 
border:5px # 03c solid; 
} 
.dl{ 
background: # CCC; 
width:200px; 
height:50px; 
) 
.d2( 
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background: # CFF; 
width:280px; 
height:80px; 
) 
} 
</style> 
</head> 


<body> 
<div class= "d1"> 
1 号 div: 不 浮动 二 br 二 宽 : 200px , 高 : 50px 
</div> 
<div class="d2"> 
2 div: 不 浮动 二 br 二 宽 : 280px ,高 : 80px 
</div> 
</body> 
</html> 


WH: 

(1) 为 了 能 更 清晰 地 说 明 浮动 元 素 对 其 后 面 元 素 的 影响 ,设计 此 例 时 有 意 将 2 号 div 
的 尺寸 大 于 1 号 div, 并 给 两 个 div 设置 了 背景 色 和 边框 。 

(2) 为 了 说 明 浮 动 所 产生 的 文字 环绕 效果 ,在 2 号 div 中 添加 了 一 些 文字 。 

实施 过 程 如 下 。 

(1) 打开 素材 exp4_4. html, 熟 悉 HTML 代码 和 CSS 代码 。 留 意 body 元 素 是 类 名 
分 别 为 dl 和 d2 的 div 元 素 的 父 元 素 ,或 者 说 body 元 素 是 两 个 div 元 素 的 包含 块 。 浏 览 
页 面 效果 ,如 图 4-14(a) 所 示 , 即 按 正常 文档 流 显 示 o 

(2) 实现 图 4-14(b) 所 示 的 效果 很 简单 : 给 类 名 为 dl 的 选择 器 添加 “float:left; ”的 样 
式 声明 ,相应 的 修改 HTML 代码 中 的 说 明文 字 即 可 。 浏 览 页 面 效 果 , 留 意 到 2 号 div 的 
左上 角 与 1 号 div 的 左上 角 重 合 , 这 就 是 1 号 div 的 CSS 规则 “float:left;” 的 效果 ,表现 
为 : 一 是 浮动 元 素 1 号 div 浮动 到 其 所 在 包含 块 (这 里 是 body 元 素 ) 的 最 左边 ; 二 是 跟 在 
浮动 元 素 1 号 div 后 面 的 元 素 2 号 div 会 忽略 其 存在 ,以 致 其 摆 放 位 置 和 其 前 面 的 浮动 
元 素 相 重 。 这 种 表现 的 实质 都 是 因为 浮动 元 素 ( 这 里 是 1 号 div) 已 不 在 正常 的 文档 流 
中 ,但 是 浮动 元 素 所 占据 的 空间 还 在 ,所 以 本 例 中 2 号 div 中 文字 的 起 始 位 置 会 受 其 
影响 。 

(3) 实现 图 4-14(c) 所 示 的 效果 : 给 类 名 为 d2 的 选择 器 添加 属性 "float:left; ”的 样式 
声明 ,相应 的 修改 HTML 代码 中 的 文字 即 可 。 这 是 实现 多 栏 布局 的 雏形 ,通过 控制 适当 
的 内 /外 边 距 可 灵活 实现 多 栏 的 页 面 效果 。 

再 次 认识 块 元 素 的 宽度 .对 于 块 元 素 , 其 宽度 有 如 下 几 种 情形 。 

(1) 在 默认 状态 下 ,其 宽度 是 所 在 包含 块 的 宽度 , 即 与 其 父 元 素 同 宽度 。 

(2) 若 将 块 元 素 设置 为 浮动 而 且 不 明确 设置 宽度 .那么 其 宽度 与 内 容 自 适应 , 即 宽度 
由 其 中 的 内 容 来 确定 。 
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(3) 明确 设置 块 元 素 的 宽度 ,可 以 是 绝对 宽度 ,也 可 以 是 相对 于 父 元 素 的 宽度 。 
以 志 p 二 标记 为 例 , 图 4-15(a) 一 图 4-15(c) 分 别 示意 了 上 述 3 种 情形 的 浏览 效果 。 


体会 浮动 块 元 素 闪 度 的 影响 。 
(a) p 元 素 与 父 元 素 同 宽度 
体会 浮动 对 块 元 素 完 度 的 影响 。 
(b) 设置 了 浮动 的 p 元 素 其 宽度 与 内 容 自 适应 
体会 浮动 对 块 元 素 遍 度 的 影响 。、 
(c) 设置 了 固定 宽度 的 p 元 素 


图 4-15 ” 块 元 素 宽度 的 三 种 情形 


所 有 浮动 元 素 之 后 的 元 素 将 会 环绕 这 个 元 素 ,图 4-16 示意 了 一 个 段落 元 素 跟 在 一 个 
RA “float:left; "规则 的 div 之 后 的 浏览 效果 。 


4-16 文本 环绕 浮动 元 素 
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浮动 元 素 可 使 其 后 面 的 元 素 向 上 移动 环绕 到 它 的 旁边 ,而 通过 clear 属性 则 可 阻止 后 
面 元 素 向 上 移动 到 浮动 元 素 旁 边 , 使 其 显示 在 浮动 元 素 的 下 边 。 如 要 消除 图 4-16 所 示 的 
文本 环绕 浮动 元 素 这 种 现象 ,需要 给 段落 元 素 设置 clear 属性 。 

clear 属性 用 于 清除 侧面 的 浮动 元 素 ,其 属性 值 和 对 应 的 作用 如 下 。 

(1) left; 在 左 侧 不 允许 浮动 元 素 。 

(2) right: 在 右 侧 不 允许 浮动 元 素 。 

(3) both: 在 左右 两 侧 均 不 允许 浮动 元 素 。 

(4) none; 默认 值 ,允许 浮动 元 素 出 现在 两 侧 。 

所 以 只 要 给 段落 元 素 添 加 一 个 “clear:left; "或 者 "clear:both; "的 样式 声明 , 即 可 消除 
环绕 的 效果 ,浏览 效果 如 图 4-17 所 示 。 


Pam ese 


图 4-17 利用 clear 属性 清除 浮动 元 素 


实际 应 用 中 经 常会 遇 到 需要 取消 环绕 现象 的 情形 。 除 了 采取 实现 如 图 4-17 所 示 效 
果 的 方式 , 即 给 需要 取消 环绕 现象 的 元 素 添 加 一 个 “clear:left; ?或 者 “clear:both; ”的 样式 
声明 ,在 实际 中 用 得 更 多 的 处 理 方式 是 在 需要 取消 环绕 现象 的 元 素 ( 如 这 里 的 段落 元 素 ) 之 
前 增加 一 个 无 内 容 的 div 元 素 , 并 添加 class 属性 ,如 “二 div class="clear" ></div>” , 98 
后 给 该 div 添加 如 “. clear{clear: left;)” 或 者 “. clear{clear: both;)” 的 样式 声明 ,这 样 该 
div 就 可 以 复制 到 任何 需要 取消 环绕 现象 的 元 素 之 前 .这 种 方式 在 实际 中 经 常 被 使 用 , 希 
望 读者 也 试 着 这 样 去 应 用 。 
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至 此 认识 了 盒子 模型 与 相关 属性 以 及 控制 布局 的 float 属性 和 clear 属性 ,但 深入 的 
理解 需要 一 个 边 做 边 理解 的 过 程 , 接 下 来 综合 利用 这 些 属性 来 完成 稍微 复杂 一 些 的 布局 
实例 和 练习 。 

页 面 无 论 其 效果 如 何 绚丽 或 者 包含 几 栏 ,布局 上 一 般 是 基于 上 中 下 这 种 框架 结构 , 即 
在 页 面 的 顶部 通常 有 一 个 被 称 为 页 眉 的 横 跨 水 平 区域 , 页 眉 区 域 常用 于 展示 网 站 所 有 者 
的 Logo .品牌 宣传 和 导航 等 功能 ; 在 页 面 的 底部 通常 有 一 个 被 称 为 页 脚 的 区 域 , 用 于 友 
情 链 接 、 版 权 所 有 和 法 律 宣传 等 ; 介 于 页 眉 和 页 脚 的 区 域 是 主 内 容 区 ,风格 是 通过 效果 来 
体现 的 。 本 章 余 下 的 内 容 都 是 基于 这 种 上 中 下 结构 的 布局 和 实现 。 

例 4-5 基于 素材 “ch4\exp4_5. html”, 设 置 各 div 元 素 的 属性 ,实现 如 图 4-18 所 示 
的 浏览 效果 。 

要 求 如 下 。 

(1) 各 div 的 尺寸 按 参考 图 中 的 文字 说 明 ,单位 均 为 px。 

(2) 页 面 整 体 居 中 。 

(3) 中 间 的 3 栏 间距 均匀 。 

(4) 为 区 分 各 div, 可 给 div 添加 background 或 者 background-color 属性 设置 背景 
色 , 如 将 背景 色 设置 为 红色 的 样式 声明 是 :“background: red;” 或 者 “background- 


color:red;”, 


页 丑 
尺寸 : 宽 960X 高 140 


产品 介绍 
尺寸 : 宽 350X 高 500 


页 脚 尺 寸 : 宽 90X 高 60 
图 4-18 固定 宽度 的 3 栏 布局 


例 4-5 配套 素材 “ch4\exp4_5. html” 文 件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> k ERER 3 栏 布局 </title> 
</head> 
<style type="text/css"> 
* {text-align : center; 
font-size: 24px; 
letter-spacing: 25px; 
margin:0;padding:0; border:0; 
) 


span( 


letter-spacing : normal; 
) 
</style> 


<body> 
<div id= "wrapper"> 
<div id= "header" > HJA <br /><span> RF: 宽 960X # 140</span> </div> 
<div id= "banner" 二 横幅 一 br /><span> RF: 宽 960X P 300</span> </div> 
<div id="content"> 
<div id= "introduction" > hA <br /><span> RIF: 宽 350X Pj 500</span> </div> 
<div id= "support" > P RZ <br /二 一 span 二 尺寸 : $ 220X P 500</span></div> 
<div id="news"> ği M <br /><span> Rt: 宽 370 X Ë 500</span></div> 
</div> 
<div class="clear" ></div> 
<div id= "footer" > HH <span> RF: % 960 X #8 60</span> </div> 
</div> 


</body> 

</html> 

实施 过 程 如 下 。 

(1) 熟悉 代码 结构 ,本 页 面 的 代码 层次 结构 如 图 4-19 所 示 。 

div#wrapper 
I | 
div#header div#banner | div#content div.clear div#footer 
| 
div#introduction] div#support div#news 


图 4-19 代码 层次 图 
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(2) 给 各 div 设置 不 同 的 背景 色 来 区 分 ,设置 背景 色 的 样式 声明 是 :“background: 颜 色 
值 ;” 或 者 "background-color: 颜 色 值 ;”, 通 过 改变 “颜色 值 "来 设置 不 同 的 颜色 ,浏览 效果 。 

(3) 观察 在 未 设置 宽度 和 浮动 的 情形 下 ,各 div 会 保持 与 浏览 器 窗口 等 宽 且 互相 堆 
EE, 

(4) 给 各 div 按 图 中 要 求 设置 宽度 和 高 度 属性 ,并 浏览 效果 ,其 中 div # header, div # 
banner 和 div # footer 元 素 按照 与 父 元 素 等 宽 的 原则 的 默认 样式 显示 其 宽度 (无 须 设置 其 
width 属性 ) ,当然 其 前 提 是 设置 了 父 元 素 div # wrapper 的 宽度 值 。 

(5) 设置 中 间 三 栏 的 布局 : 一 行 要 放置 多 个 块 元 素 , 就 必须 将 相关 块 元 素 设置 为 浮 


动 元 素 。 本 例 中 考虑 到 div # support 元 素 置 于 右 侧 ,而 
其 对 应 的 HTML 代码 是 在 元 素 div # news 之 前 ,所 以 给 
div # support 添加 “float: right;” 的 样式 声明 ,其 余 两 栏 
均 为 “float: left;”"。 其 次 中 间 三 栏 的 总 宽度 是 : 350 十 
370 十 220 二 940, 而 页 面 总 宽度 为 960, 余 : 960 一 940 一 
20, 按 “3 栏 间距 均匀 ”的 要 求 ,两 两 相隔 10, 所 以 只 需 给 
div # news 添加 “margin-left: 10px;” 或 者 给 div # 
introduction 添加 “margin-right:10px;” 即 可 ,浏览 效果 。 

(6) # div # footer 不 显示 , 则 给 div. clear 添加 
“{clear:both;)” 的 样式 声明 以 清除 其 两 侧 的 浮动 元 素 。 
部 分 参考 CSS 代码 如 图 4-20 所 示 。 

关于 外 边 距 对 布局 影响 的 几 点 说 明 如 下 。 

(1) 外 边 距 在 水 平方 向 是 累加 的 。 即 如 果 要 求 两 个 
水 平 相 邻 元 素 之 间 的 水 平 间距 是 20, 理 论 上 只 要 按照 
“左边 元 素 的 右 外 边 距 十 右边 元 素 的 左 外 边 距 二 20” 的 原 
则 设置 即 可 。 对 于 低 版 本 的 浏览 器 如 IE 6, 为 了 取消 双 
倍 外 边 距 , 有 必要 给 相应 的 块 元 素 添加 “display:inline;” 
的 样式 声明 ,不 过 对 当下 的 浏览 器 已 无 此 必要 了 。 

(2) 外 边 距 在 垂直 方向 是 不 累加 的 , 按 * 取 较 大 值 ” 
原则 确定 垂直 方向 的 外 边 距 。 即 对 于 两 个 垂直 相 邻 的 元 
素 , 若 上 方 元 素 的 下 边 距 是 20px. 而 下 方 元 素 的 上 边 距 
是 25px, 那 么 按 * 取 较 大 值 ? 的 原则 ,这 上 下 相 邻 元 素 的 
垂直 间距 是 25px。 

本 例 涉 及 布局 各 个 div 的 宽度 和 高 度 都 是 以 px 表 
示 的 特定 宽度 ,主要 实现 过 程 可 简化 为 : 在 编写 了 结构 
清晰 的 XHTML 代码 基础 上 ,为 各 div 元 素 按 要 求 设置 
大 小 ; 然后 参照 布局 图 给 相应 的 元 素 设置 浮动 属性 。 

对 于 这 种 固定 大 小 的 页 面 在 显示 上 有 如 下 的 特点 : 
如 图 4-18 所 示 的 页 面 如 在 水 平分 辨 率 为 800 的 浏览 器 
上 显示 ,浏览 器 会 显示 一 个 水 平 的 滚动 条 ; 如 在 水 平分 


# wrapper{ 
width:960px; 
margin:5px auto; 

) 

# header{ 
height:140px; 
background: # CFF; 

} 

# banner{ 
height:300px; 
background: # 9CF ; 

) 

# newproduct{ 
height:500px; 
background: # ffc ; 

) 

# content ( 
background-color: # fff; 

) 

# introduction( 
width:350px; 
height:500px; 
float:left; 
background: # ff6 ; 

) 

# news{ 
float:left; 

height:500px; 

width:370px; 

margin-left:10px; 
background: # CCF; 

) 

# support ( 
height:500px; 
width:220px; 
float:right; 
background: # FCF; 

) 

.clear{ 
clear:both; 

} 

# footer{ 
height:60px; 
background: # CFF; 

) 


图 4-20 例 4-5 的 部 分 参考 代码 
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辨 率 大 于 1300 的 浏览 器 上 显示 ,那么 在 左右 两 侧 会 留 下 大 量 的 空白 。 对 于 这 种 固定 大 小 
的 页 面 ,对 放 入 其 中 的 内 容 也 需要 求 , 就 是 要 求 内 容 恰 如 其 分 。 当 然 这 种 固定 大 小 的 页 面 
其 最 大 的 好 处 是 简单 可 控 。 

在 实际 的 网 页 设计 中 , 除 页 眉 、 页 脚 和 导航 栏 等 模块 的 部 分 尺寸 比较 明确 外 ,网 页 内 
容 的 宽度 和 高 度 是 比较 灵活 的 ,这 种 灵活 性 一 方面 体现 在 页 面 中 内 容 所 占 的 容积 , 另 一 
方面 体现 在 对 于 不 同 分 辩 率 的 浏览 器 ,其 显示 的 宽度 也 不 一 样 ,这 时 需要 容器 的 宽度 
有 更 大 的 灵活 度 ,这 就 是 所 谓 流动 布局 的 特点 ,所 以 在 实际 中 一 般 是 固定 和 流动 混合 
搭配 。 


4.3 多 栏 固定 /流动 混合 布局 


前 一 小 节 尝 试 了 固定 布局 ,其 特点 用 px 为 单位 表示 宽度 ,由 于 太 没 有 灵活 性 在 实际 
中 很 少 采 用 。 与 之 相对 的 是 不 固定 布局 ,又 称 流动 布局 ,与 之 相应 的 表示 宽度 的 单位 是 百 
分 比 ,流动 布局 使 得 页 面 能 够 随 着 浏览 器 窗口 的 大 小 调整 而 平滑 地 发 生变 化 ,这 样 的 灵活 
性 就 可 使 得 网 页 能 比较 好 地 显示 在 较 低 或 较 高 分 辨 率 的 屏幕 ,但 是 纯粹 的 流动 布局 需要 
花费 大 量 的 时 间 和 精力 调试 使 网 页 适合 各 种 分 辩 率 的 浏览 器 ,所 以 考虑 效果 和 成 本 之 间 
匹配 ,在 实际 中 常 采用 固定 /流动 混合 布局 。 如 图 4-21 所 示 页 面 中 间 部 分 就 是 采用 左 栏 
固定 , 右 栏 流动 的 布局 ,图 中 示意 了 具有 流动 布局 特点 的 网 页 在 大 小 不 同 屏幕 上 的 显示 


效果 。 
ma 
— 
p] 
(a) 相对 大 屏幕 
mas 
Wi Parea 
my 
(b) 相对 小 屏幕 


图 4-21 具有 流动 布局 特点 的 页 面 效果 


431 两 栏 的 混合 布局 


两 栏 混合 布局 首先 是 两 栏 并 排 显示 ,混合 就 是 指 其 中 一 栏 是 宽度 固定 ,一 般 用 于 放置 
导航 或 者 注册 之 类 的 内 容 ,而 另 一 栏 的 宽度 则 是 不 固定 的 , 即 该 栏 的 宽度 随 浏览 器 窗口 大 
小 的 变化 而 调整 ,又 称 宽度 自 适应 ,常用 于 放置 页 面 的 主 内 容 。 

假设 页 面 主要 部 分 的 HTML 代码 如 图 4-22 所 示 ( 基 于 素材 “ch4\ 图 4-22. html”). 
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<div id="wrapper"> 
<div id= "header" > HJE </div> 
<div id= "content" > 
<div id="one" >% 1 栏 : 固定 宽度 200</div> 
<div id="two" >48 2 Ë“ : 宽度 自 适应 </span> </div> 
</div> 
<div class="clear" ></div> 
<div id= "footer" > H </div> 
</div> 


图 4-22 页 面 两 栏 布局 代码 


这 是 比较 典型 的 两 栏 页 面 布局 相应 的 HTML 代码 ,对 应 的 层次 结构 如 图 4-23 所 示 。 


div#wrapper 


[ I l 
div#header div#conter div.clear | div#footer 


div#one div#two 


图 4-23 两 栏 布 局 代码 结构 图 


假设 要 求 中 间 内 容 栏 中 第 1 栏 是 固定 宽度 (如 200px) ,第 2 栏 是 可 变 的 流动 宽度 , 实 
现 如 图 4-24 所 示 的 效果 。 


mia 
第 1 栏 : 固 定 宽度 200 第 2 栏 : 完 庶 自 适 应 
T 


图 4-24 两 栏 页 面 布 局 效果 


可 采用 多 种 方式 来 实现 上 述 效 果 , 本 小 节 介 绍 其 中 两 种 ,这 两 种 方式 都 是 以 素材 “ch4\ 
图 4-22. html” 为 基础 的 。 

方式 1: 通过 设置 其 中 一 栏 的 浮动 性 和 另 一 栏 的 外 边 距 来 实现 ,具体 如 下 。 

(1) 设置 第 1 栏 左 浮 , 让 其 从 当前 文本 流 中 “ 抽 离 ”, 以 实现 两 栏 的 布局 。 

(2) 设置 第 2 栏 的 左 外 边 距 等 于 第 1 栏 的 宽度 ( 若 大 于 第 1 栏 的 宽度 , 则 在 两 栏 之 间 
可 产生 间隙 的 效果 ) 。 


(3) 对 应 的 CSS 规则 如 图 4-25 所 示 。 
方式 2: 将 两 栏 都 设置 为 浮动 ,并 通过 设置 它们 所 width:200px; 
在 父 容器 的 内 边 距 来 配合 ,具体 如 下 。 "Spa iss 
(1) 设置 父 容器 div # content 的 左 内 边 距 为 #twol 
200px， 即 第 š 栏 的 宽度 。 margin-left:200px; 
(2) 设置 第 1 EAER. AIAPE — 200px, ISE p EE 
现 第 1 栏 与 父 容器 左边 靠 齐 的 效果 。 


(3) 设置 第 2 栏 左 浮 ,宽度 100% (很 重要 ), 以 实 M425 一 种 实现 两 栏 混合 浮动 
现 浮动 元 素 第 2 栏 与 父 容器 宽度 的 自 适应 而 不 是 与 内 的 CSS 规则 
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容 的 自 适用 (最 好 对 比 一 下 不 设置 宽度 100% 的 情形 )。 
(4) 对 应 的 CSS 规则 如 图 4-26 所 示 。 


# content{ 
padding-left: 200px; 
} 
#one{ 
float:left; 
margin-left:-200px; 
width:200px; 
background: # ff6; 
j 
# two( 
float:left; 
width:100% ; 
background: # CCF; 
i 


图 4-26 另 一 种 实现 两 栏 混合 浮动 的 CSS 规则 


若 仅 针对 上 述 的 两 栏 布局 效果 ,方式 2 与 方式 1 相 比 , 略 显 复杂 一 些 , 但 是 方式 2 对 
于 理解 盒子 模型 的 内 边 距 外边 距 和 宽度 属性 是 有 帮助 的 ,更 重要 的 是 对 于 三 栏 、 四 栏 等 
多 栏 的 混合 布局 ,方式 2 更 能 体现 其 优越 性 。 


432 高 度 方向 的 等 高 自 适 应 


在 测试 上 一 小 节 第 2 栏 的 宽度 自 适用 时 ,缩小 浏览 器 窗口 的 大 小 ,会 出 现 如 图 4-27 
所 示 的 效果 。 

图 4-27 所 示 的 效果 呈现 的 特征 是 : 各 栏目 的 高 度 由 所 包含 的 内 容 来 确定 , 即 当 浏览 
器 窗口 缩小 到 某 一 程度 时 ,第 2 栏 中 的 内 容 会 自动 换行 ,从 而 增加 第 2 栏 的 高 度 ( 如 与 
图 4-24 相 比 ,图 4-27 中 第 2 栏 的 宽度 变 窗 而 高 度 由 1 行 增加 到 3 行 ), 但 第 1 栏 的 高 度 未 
发 生变 化 , 借 由 第 1 栏 的 背景 可 清晰 看 到 ,这 不 是 想 要 的 效果 。 

理想 的 情形 是 : 中 间 部 分 的 两 栏 能 够 实现 如 图 4-28 所 示 的 等 高 自 适应 效果 。 


TE 


第 1 栏 :固定 亮度 200 a 


TE 


(b) 浏览 器 窗口 较 小 时 
图 4-27 第 1 栏 的 高 度 不 变 图 4-28 两 栏 等 高 自 适应 的 效果 


| o < y | xhTML+C55 网 页 设计 与 制作 实例 才 和 | — — 


基于 素材 “ch4\ 图 4-28. html" 实 现 页 面 中 间 部 分 两 栏 等 高 自 适应 的 过 程 如 下 。 

(1) 给 第 1 栏 和 第 2 栏 设置 一 个 数值 大 得 看 似 荒 廖 的 下 内 边 距 和 下 外 边 距 ,如 分 别 
为 1000px 和 一 1000px, 浏 览 效 果 。 注 意 这 个 数值 的 大 小 可 随 内 容 多 少 来 增 减 ,总 的 原则 
一 是 足够 大 ,二 是 下 外 边 距 为 负 。 

(2) 若 希 望 页 脚 能 显示 ,给 页 脚 添 加 一 个 


# content{ 
{position:relative; } 的 样式 声明 ,再 一 次 浏览 效 ia] 
果 ( 这 一 步骤 用 于 初学 者 的 调试 ,熟练 以 后 可 ; padding-left: 200px; 
略 去 ) 。 # one, # two[ 
(3) 给 第 1 栏 和 第 2 栏 的 父 容 器 添加 一 个 padding-bottom: 1000px; 
{overflow:hidden; } 的 样式 声明 。 macha- potto -1000Pxi 


(4) 对 应 的 CSS 规则 如 图 4-29 所 示 。 
这 种 思路 不 仅 对 两 栏 有 效 , 同 样 适合 于 三 栏 、 
四 栏 等 在 高 度 上 要 求 等 高 的 自 适应 。 图 4-29 所 示 的 CSS 规则 中 用 到 了 溢出 属性 overfloat。 


433 溢出 属性 oerflow 


XHTML 中 的 每 个 元 素 都 可 以 看 成 一 个 盒子 , 当 这 个 盒子 所 在 的 矩形 区 域 设置 得 太 
小 ,以 至 容 不 下 其 中 的 内 容 ( 一 般 是 文本 ) 时 ,就 会 产生 溢出 。overflow 属性 就 是 用 于 控制 
元 素 如 何 处 理 溢出 内 容 的 属性 。 其 主要 属性 值 和 对 应 的 作用 如 下 。 

(1) visible: 默认 值 。 内 容 不 会 被 修剪 ,溢出 部 分 会 显示 在 元 素 区 域外 。 

(2) hidden: 内 容 会 被 修剪 ,溢出 部 分 是 不 可 见 的 。 

(3) scroll; 内 容 会 被 修剪 ,总 会 显示 滚动 条 以 查看 溢出 部 分 。 

(4) auto: 内 容 会 被 修剪 , 按 需 显示 滚动 条 以 查看 溢出 部 分 。 

图 4-30(a) 一 图 4-30(d) 分 别 显示 了 将 元 素 的 overflow 属性 设置 为 visible hidden, 
scroll 和 auto 时 对 所 含 内 容 显 示 的 影响 。 为 更 清晰 地 说 明 问 题 , 将 元 素 的 宽度 和 高 度 属 
性 设置 为 某 一 个 固定 值 ,同时 给 元 素 设置 了 边框 。 


图 4-29 设置 两 栏 等 高 的 关键 CSS 规则 


(a) 会 显示 溢出 部 分 


(e) 显示 滚动 条 (d) 按 需 显示 滚动 条 


图 4-30 overflow 属性 的 4 种 显示 效果 


434 三 栏 的 混合 布局 


车 布局 的 三 栏 都 是 固定 宽度 (如 本 章 例 4-5 和 练习 4-5 的 情形 ), 只 要 给 各 栏 设置 给 
定 的 宽度 ,然后 设置 各 栏 的 浮动 属性 即 可 。 

在 实际 的 网 页 设计 中 典型 的 三 栏 布局 通常 是 其 中 两 栏 宽 度 固定 , 另 一 栏 宽 度 自 适用 ， 
即 所 谓 的 三 栏 混 合 布局 ,效果 如 图 4-31 所 示 。 可 以 沿用 4. 3.2 小 节 中 的 思路 来 解决 ,本 
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小 节 仍 介绍 其 中 两 种 解决 的 方式 。 


ma 

E : 固定 宽度 200px 
度 120px 

页 脚 


图 4-31 三 栏 混合 布局 效果 图 


方式 1: 基于 素材 “ch4\ 图 4-32. html”, 假 设 页 面 主要 部 分 的 HTML 代码 如 图 4-32 
所 示 。 


<div id= "wrapper"> 
<div id="header"> HJE </div> 
<div id=" content" > 
<div id="one" >H 1 栏 :固定 宽度 120px </div> 
<div id="two" >48 2 栏 : 宽度 自 适应 <</div> 
<div id= "three">>% 3 栏 : 固定 宽度 200px </div> 
</div> 
<div class="clear" ></div> 
<div id="footer" > H </div> 
</div> 


图 4-32 页 面 三 栏 布局 代码 
对 应 的 层次 结构 如 图 4-33 所 示 。 


div#wrapper 
I 
[ I 
div#header div#content div.clear | div#footer 
| 
[ | 
div#one divitwo divithree | 


图 4-33 三 栏 布局 代码 结构 图 


总 的 思路 是 : 将 三 栏 都 设置 为 浮动 .设置 它们 所 在 父 容器 的 左 、 右 内 边 距 , 具 体 如 下 。 

(1) 设置 父 容器 div # content 的 左 、 右 内 边 距 分 别 为 120px 和 200px, 即 第 1 栏 和 
第 3 栏 的 宽度 。 

(2) 设置 第 1 栏 左 浮 , 左 外 边 距 为 一 120px, 以 实现 第 1 栏 与 父 容器 左边 靠 齐 的 效果 。 

(3) 设置 第 2 栏 左 浮 ,宽度 100. 

(4) 设置 第 3 栏 右 浮 , 右 外 边 距 为 一 200px, 以 实现 第 3 栏 与 父 容器 右边 靠 齐 的 效果 。 

(5) 中 间 三 栏 在 高 度 方向 的 自 适应 对 齐 与 上 一 小 节 的 处 理 方式 相同 。 

(6) 对 应 的 CSS 规则 如 图 4-34 所 示 。 

该 方式 与 4. 3. 2 小 节 中 的 方式 2 是 一 脉 相 承 的 ,特点 是 HTML 代码 简洁 ,灵活 性 强 ， 
希望 读者 能 理解 并 应 用 到 实际 的 页 面 设计 中 。 

方式 2: 类 似 于 4.3.2 小 节 中 的 方式 1, 总 体 上 是 按 基于 两 栏 的 思路 来 处 理 , 即 通过 设置 
其 中 一 栏 的 序 动 性 和 另 一 栏 的 外 边 距 来 实现 。 实 际 的 三 栏 通过 嵌 套 来 处 理 , 下 面 基于 素材 
“ch4\ 图 4-35. html" 来 介绍 该 方式 。 假 设 素 材 页 面 主要 部 分 的 HTML 代码 如 图 4-35 所 示 。 
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# content{ 
padding:0 200px 0 120px; 
overflow : hidden; 


) 

# one, # two, # three( 
padding-bottom :2000px; 
margin-bottom :-2000px; 

) 

#one( 
float:left; 
margin-left :-120px; 
width:120px; 
background: 并 ff6; 


) 
#two{ 
float:left; 
width:100% ; 
background: # CCF; 
) 
# three( 
float: right; 
margin-right:-200px; 
width:200px; 
background: # FCF; 


图 4-34 一 种 实现 三 栏 混合 布局 的 CSS 规则 


<div id="wrapper"> 
<div id= "header" > HJE </div> 
<div id= "content" > 
<div id="one" >% 1 栏 :固定 宽度 120px </div> 
<div id="main"> 
<div id="three" >45 3 栏 : 固定 宽度 200px </div> 
<div id="two" >48 2 栏 : AE B 38 2 </div> 
</div> 
</div> 
<div class="clear" ></div> 
<div id="footer" > H </div> 
</div> 


图 4-35 页 面 三 栏 布局 代码 


上 述 代码 对 应 的 层次 结构 如 图 4-36 所 示 。 

具体 实现 如 下 。 

d) 设置 第 1 栏 ( 井 one) 左 浮 ,宽度 是 120px。 

(2) 设置 第 2.3 栏 (并 main) 的 左 外 边 距 等 于 第 1 栏 的 宽度 ,这 里 是 120px。 
(3) 设置 第 3 ° ( # three) Ar É , WEE 200px。 

(4) 设置 第 2 栏 (#two) 的 右 外 边 距 等 于 第 3 栏 的 宽度 ,这 里 是 200px。 
(5) 高 度 方向 的 自 适应 对 齐 与 上 一 小 节 的 处 理 方式 相同 。 


div#wrapper 
div#header div#content div.clear div#footer 
div#one div#main 
div#three div#two 


图 4-36 三 栏 布局 代码 结构 图 


(6) 对 应 的 CSS 规则 如 图 4-37 所 示 。 


# content{ 
overflow:hidden; 

) 

# one, # two, # three{ 
padding-bottom :2000px; 
margin-bottom:-2000px; 

) 

#one[ 
float:left; 
width:120px; 
background: # ff6; 


) 

# main[ 
margin-left:120px; 

) 

#two( 
margin-right: 200px; 
background: # CCF; 

) 

# three{ 
float:right; 
width:200px; 
background: # FCF; 


图 4-37 CSS 规则 


435 定位 属性 position 

position 属性 是 CSS 布局 的 核心 ,该 属性 用 于 确定 元 素 所 在 的 盒子 在 页 面 定位 时 的 
参照 元 素 , 即 所 谓 的 定位 环境 。 

position 属性 的 主要 属性 值 和 对 应 的 作用 如 下 。 

(1) static: 默认 值 。 其 特点 是 元 素 按 其 在 XHTML 代码 中 的 前 后 位 置 顺序 显示 , 块 
元 素 独占 一 行 ,而 行内 元 素 紧 跟前 一 个 元 素 水 平 显示 ,如 图 4-38(a) 所 示 。 其 特点 是 : 像 
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top.left.right 和 bottom 这 样 的 位 置 属性 对 具有 “{position: static;}” 样 式 声明 的 元 素 不 
起 作用 。 

(2) relative: 相对 定位 ,该 属性 值 和 static 
的 最 大 区 别 是 top, left, right 和 bottom 这 样 
的 位 置 属性 会 影响 元 素 的 位 置 。 在 这 种 相对 
定位 样式 下 ,这 些 位 置 属性 用 来 控制 元 素 相对 (a) 定位 是 默认 的 情形 
于 其 原始 位 置 的 偏 移 ( 即 其 定位 环境 就 是 该 元 
素 在 正常 文档 流 中 的 位 置 ), 但 是 这 样 的 偏 移 [| 
不 影响 其 后 续 元 素 的 位 置 ,如 图 4-38(b) 所 示 。 

从 图 4-38 可 以 看 出 ,对 于 相对 定位 的 元 
素 , 若 不 设置 其 top,left 等 位 置 属性 ,其 在 布局 
中 的 位 置 与 默认 定位 相同 ,但 是 其 最 大 的 功能 。 图 438 默认 定位 与 相对 定位 的 对 比 
是 : 相对 定位 了 的 元 素 可 以 作为 其 子 元 素 的 定位 环境 ,认识 到 这 点 非常 重要 。 

(3) absolute; 绝对 定位 。 这 是 比较 复杂 的 定位 方式 , 现 从 以 下 几 个 方面 来 解读 。 

绝对 定位 的 定位 环境 就 是 元 素 最 近 的 且 具 有 “{ position; relative; }” 3 # 
“{ position: absolute;}” 样 式 声明 的 祖先 元 素 (可 以 是 父 元 素 ,也 可 以 是 祖父 元 素 或 者 祖 
祖父 元 素 ), 若 没有 符合 这 样 条件 的 祖先 元 素 ,那么 就 相对 于 body 元 素来 定位 。 

© 绝对 定位 的 元 素 会 忽略 float 属性 , 即 float 属性 的 设置 对 绝对 定位 元 素 不 起 
作用 。 

© top \left right 和 bottom 这 样 的 位 置 属性 值 是 参照 定位 环境 的 。 

@ 车 给 元 素 添 加 了 “{position: absolute; ) "的 样式 声明 ,就 将 该 绝对 定位 元 素 从 正常 
的 文档 流 中 * 抽 离 ”, 其 产生 的 效果 一 方面 是 使 其 后 续 元 素 的 位 置 上 移 , 完 全 忽略 绝对 定位 
元 素 的 存在 ; 另 一 方面 影响 绝对 定位 元 素 本 身 的 宽度 , 即 在 未 指定 绝对 定位 元 素 宽度 的 
情形 下 其 宽度 是 按 “ 内 容 自 适应 ”原则 。 如 图 4-39(b) 所 示 的 1# div 采用 绝对 定位 ,其 后 
续 元 素 2 # div 就 当 1# div 不 存在 ,而 与 父 容器 的 左上 角 靠 齐 显示 ,同时 1 # div 的 宽度 是 
内 容 自 适应 。 在 实际 的 页 面 布 局 中 一 般 对 局 部 容器 (如 页 眉 、 页 脚 和 2 级 菜单 等 ) 内 的 元 
素 使 用 绝对 定位 ,其 诀 容 就 是 对 需要 绝对 定位 元 素 的 父 容器 添加 *{position: relative; ) ” 
的 样式 声明 作为 其 定位 环境 ,以 达到 定位 精准 高 效 且 不 影响 其 他 元 素 的 效果 。 


(b) 2#div 是 相对 定位 的 情形 


(a) 定位 是 默认 的 情形 


(b) 1#div 是 绝对 定位 的 情形 
图 4-39 默认 定位 与 绝对 定位 的 对 比 
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© 当 多 个 绝对 定位 的 元 素 重 盖 时 ,通过 设置 属性 z-index 的 值 来 决定 上 下 顺序 ,规则 
是 “z-index 属性 值 较 大 的 元 素 在 z-index 属性 值 较 小 的 元 素 上 面 ”, 如 图 4-40 所 示 , 图 中 
的 三 个 div 都 是 绝对 定位 ,其 中 图 4-40(a) 是 没有 给 元 素 设置 z-index 属性 的 浏览 效果 , 按 
各 个 div 在 XHTML 代码 的 前 后 顺序 ,最 后 面 的 元 素 显示 在 最 上 面 ; 而 图 4-40(b) 是 给 
1#div.2 # div #l 3 # div 分 别 添加 了 “{z-index:3;)”、“{z-index:2;)”、“{z-index:1;)” 样 
式 声 明 后 的 显示 效果 ,1# div 元 素 的 z-index 属性 值 最 大 ,所 以 显示 在 最 上 面 。 


(a) 不 设置 元 素 z-index 属 性 的 显示 效果 


(b) 1#div 的 z-index 属性 值 最 大 
图 4-40 属性 z-index 决定 重叠 的 绝对 定位 盒子 的 显示 顺序 


(4) fixed; 固定 定位 。 其 定位 环境 是 视 口 , 即 浏览 器 或 者 屏幕 。 当 页 面 滚动 时 ,采用 
固定 定位 的 元 素 不 会 随 屏 幕 移动 , 常 利用 固定 定位 元 素来 创建 一 个 与 页 面 滚动 无 关 的 导 
航 条 。 如 “{position:fixed; left:40px; top:60px;)” 的 样式 声明 就 是 表示 相对 于 浏览 器 
窗口 左下 方位 置 分 别 为 40px 和 60px 定位 ,采用 该 CSS 规则 的 元 素 不 会 随 页 面 滚动 条 的 
滑动 而 移动 。 
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每 一 个 XHTML 元 素 都 有 一 个 默认 的 display 属性 值 “block? 或 “inline”, 像 二 hl 二 一 
<h6>.<p> ,<ul—#l—div> JJ OBRA BJ display 属性 值 为 "block”, 使 得 它们 
在 默认 样式 下 ,每 个 元 素 另 起 一 行 ,在 高 度 方向 以 堆 释 的 排列 方式 显示 ; 而 二 a>、 二 span 二 
和 到 img 二 等 行内 元 素 其 默认 的 display 属性 值 为 “inline”, 使 得 它们 在 水 平方 向 并 排 显 
示 , 只 有 当前 一 行 没 有 足够 的 空间 时 才 会 显示 到 下 一 行 。 

display 属性 可 用 于 实现 行内 元 素 和 块 元 素 之 间 的 转换 ,display 属性 的 主要 属性 值 和 
对 应 的 作用 如 下 。 

(1) block; 将 元 素 转换 为 块 级 元 素 ,一 般 对 以 a 元素 为 代表 的 行内 元 素 使 用 。 

(2) inline: 将 元 素 转换 为 行内 级 元 素 ,一 般 对 块 级 元 素 使 用 。 

(3) none; 使 元 素 及 组 套 在 其 中 的 任何 元 素 都 不 显示 在 页 面 , 且 该 元 素 所 占 的 任何 
空间 也 会 被 移 除 , 这 和 ”*({visibility:hidden;)" 的 样式 声明 所 产生 的 隐藏 元 素 效果 是 一 样 
的 ,但 保留 元 素 所 占 空 间 的 效果 是 不 一 样 的 。 

“一 切 元 素 皆 为 盒子 ”, 本 章 前 面 绝 大 部 分 内 容 都 在 讨论 块 级 元 素 盒 子 ,现在 介绍 一 下 
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行内 元 素 盒 子 的 特点 ,a 和 span 等 元 素 称 为 “行内 元 素 ”, 它 们 的 内 容 显示 在 行 中 , 即 “ 行 
内 盒子 ”, 行 内 盒子 在 一 行 中 水 平 并 排 显示 ,行内 盒子 具有 的 特点 如 下 。 

(1) 可 使 用 水 平方 向 上 的 内 边 距 ,边框 和 外 边 距 调整 行内 盒子 在 水 平方 向 所 占 的 空 
间 , 即 影响 行内 盒子 在 水 平方 向 的 布局 。 

(2) 垂直 方向 上 的 内 边 距 ,边框 和 外 边 距 是 不 影响 行内 盒子 在 垂直 方向 上 所 占 的 空 
间 的 ,或 者 说 行内 盒子 在 垂直 方向 的 布局 不 受 垂直 方向 上 的 内 边 距 ,边框 和 外 边 距 的 影 
响 , 这 是 行内 元 素 和 块 元 素 在 布局 上 的 差别 之 一 。 图 4-41(a) 和 图 4-41(b) 对 比 了 内 边 距 
和 外 边 距 对 行内 元 素 在 水 平和 垂直 方向 布局 上 所 产生 的 不 同 影响 ,其 中 图 4-41 Ca) 的 
span 元 素 设置 了 “{padding:0; margin:0;}” 的 样式 声明 ,图 4-41(b) 的 span 元 素 设 置 了 
“{padding:5px; margin:10px; )” 的 样式 声明 。 


3 个 div 
期 1 (a) 无 内 /外 边 距 的 情形 


第 3 个 div 
(b) 有 内 /外 边 距 的 情形 


图 4-41 内 /外 边 距 对 行内 元 素 在 水 平和 垂直 方向 布局 影响 对 比 
但 是 行内 元 素 所 在 行 的 高 度 受 行 高 line-height 属性 的 影响 ,图 4-42 a) 和 图 4-42(b) 是 
不 同行 高 情形 下 行内 元 素 所 在 行 的 高 度 ,其 中 图 4-42(a) 的 span 元 素 设置 了 “(line-height: 
15px; })” 的 样式 声明 ,图 4-42(b) 的 span 元 素 设置 了 “(line-height:30px; })” 的 样式 声明 。 


第 3 个 div 
(a) 行内 元 素 的 行 高 15px 


| 
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1 
(b) 行内 元 素 的 行 高 30px 


A 4-42 行 高 对 行内 元 素 的 影响 


例 4-6 基于 素材 “ch4\exp4_6. html”, 利 用 盒子 模型 中 的 相关 属性 设置 图 4-43(b) 
所 示 的 效果 (或 参照 图 片 文 件 exp4_6. jpg) ,并 利用 display 属性 扩大 超 链 接 的 单 击 区 域 与 
标题 h4 等 宽 (注意 不 要 修改 h4 的 样式 ) 。 

例 4-6 配套 素材 “ch4\exp4_6. html” 文 件 源 代码 ; 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 

w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
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上 门 自 提 其 
WEE 标准 快速 册 


了 目 提 
标准 快递 册 - 
特快 专递 册 特快 专递 册 
EMS 易 邮 宝 册 EMS 易 邮 宝 册 
宅急送 册 宅急送 册 
(a) 初始 状态 (b) 完成 状态 


图 4-43 $J 4-6 设置 前 .后 的 效果 


<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> E H] display 属性 扩大 二 a 二 标记 的 点 击 区 域 二 /title 二 
<style type="text/css"> 
*{ 
padding :0 ; margin :0 ; text-decoration : none; 
list-style : none; 
} 
body{ 
padding:3px 0 0 3px;} 
h4( 
background: # A00; 
color: # fff; 
width: 150px; 
text-indent:12px; 
line-height: 1. 6em; 
) 


</style> 
</head> 


<body> 
二 h4 配送 方式 < /h4> 
<u> 
<li><a href=" # "> ET] B #H</a> </li> 
<li><a href=" # ">H 38 JJf< /a> </li> 
<li><a href=" # ">t ë Jff< /a> </li> 
<li><a href=" # ">EMS B jS: Jji< /a> </li> 
<li><a href=" # ">s #j&J8#</a> </li> 
</ul> 
</body> 
</html> 


实施 过 程 如 下 。 

d) 查看 初始 状态 和 完成 状态 之 间 的 差异 : 列表 项 之 间 的 垂直 间隔 、 超 链接 背景 和 
悬 停 的 背景 . 超 链 接 的 单 击 区域 等 (可 利用 给 各 元 素 设置 背景 来 辅助 设置 ) 。 

(2) 让 列表 与 标题 h4 等 宽 : ul{ with:150px; } 。 

(3) 让 各 列表 项 之 间 在 垂直 方向 拉 开 : lil margin-top:5px;), 具 体 数 据 仅 供 参考 。 

(4) 给 一 a> 标 记 设 置 背景 和 悬 停 背景 ,并 设置 文字 的 位 置 ， 


a{ 
background: # 9FF; 


Q [xHTML+C55 网 页 设计 与 制作 实例 教程 ] | 


padding-left:10px; / * BË text-indent:10px; * / 


a:hover( 
background: # CCC; 
) 
(5) 扩充 二 a 二 标记 的 单 击 区 域 至 所 在 行 宽 : 给 a 添加 规则 “display:block; "将 行内 
元 素 转 换 成 块 元 素 ,其 宽度 为 所 在 父 元 素 li 的 宽度 。 参考 的 CSS 设置 如 图 4-44 所 示 。 


ul{ width:150px; 

} 

li{ 
margin-top:5px; 

} 

a( 
display: block; 
background: # 9FF; 
text-indent: 10px; 

} 

a:hover{ 
background: # CCC; 


} 
E 4-44 例 4-6 效果 的 参考 CSS 规则 


例 4-7 基于 素材 “ch4\exp4_7” 文 件 夹 ,利用 position/display 属性 实现 二 p 过 标记 位 

置 的 控制 ,显示 与 隐藏 ,给 页 面 文件 "exp4_7. html” 设 置 合适 的 CSS 代码 使 其 呈现 如 

图 4-45(b) 所 示 的 效果 (或 参照 *ch4\exp4_7” 文 件 夹 中 的 图 片 文件 exp4_7. jpg). B] < p> 
标记 的 介绍 文字 是 隐藏 的 , 当 鼠 标 悬 停 在 相应 的 位 置 时 ,介绍 文字 才 显 示 。 


大 九 赛 


ay aree m eiee in BWE ARME SARIN ENER 
TS S AmA RT ee | 
a ed E El 


(a) 初始 效果 (b) 完成 效果 
图 4-45 $j 4-7 前 后 效果 对 比 


例 4-7 配套 素材 “ch4\exp4_7. html” 文 件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> Í&3@ position/ display JÄ E< /title> 
<style type= "text/css"> 
* {padding:0; margin:0;) 
# content{ 
width:154px; 
margin:2px 0 0 50px; 


div. con{ 
margin-top:20px; 


h3( 
text-align:center; 


width:400px; 

font-size: 13px; 
text-indent:2em; 
) 
div.djz pí 

background: # 39F; 
) 
div.dxm pf{ 

background: # CCC; 
) 
div.dcy p{ 

background: # 6C6; 


img{ 
border:lpx #000 solid; 
width:150px; 

) 


</style> 
</head> 
<body> 


<div id= "content" > 
<div class="con djz"> 
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<h3> KAR</h3> 
<img src= "images/djz.gif" alt 一 "大 九寨 ” /> 
到 p> 我 国 目前 被 联合 国教 科 文 组 织 纳 入 世界 自然 遗产 名 录 》 的 只 有 五 处 ,阿坝 州 就 占 
三 处 ,包括 九寨沟 风景 名 胜 区 和 黄龙 名 胜 区 以 及 四 川 大 熊猫 栖息 地 的 大 部 分 。 梁 绿 而 金黄 的 树 
Š.nbsp; ,高 峻 而 多 姿 的 山 &nbsp;,&nbsp; 明 丽 而 浓艳 的 水 ,构成 九寨 沟 绝世 之 美 。 湖 水 终年 锋 
蓝 澄清 明丽 见 底 , 随 着 光照 变化 ,季节 推移 ,呈现 出 不 同 的 色彩 和 风韵 ,有 “黄山 归来 不 看 山 , 九寨 
归来 不 看 水 "之 说 。 
</p> 
</div> 
<div class= "con dxm"> 
<h3> KAR < /h3— 
<img src= "images/dcy.gif" alt=" KARM" /> 
<p> WJI KARI Hi L b F 2006 年 7 H 12 日 被 联合 国教 科 文 组 织 正式 评审 为 世界 自然 
遗产 地 ,包括 卧龙 四 姑娘 山 , 小 金 与 宝 兴 交 界 的 夹 金山 等 地 ,是 世界 上 野生 大 熊猫 数量 最 多 的 地 
区 ,其 中 卧龙 自然 保护 区 是 世界 上 最 大 的 大 熊猫 保护 区 , 它 位 于 汶川 县 西南 部 ,是 中 国 最 早 建立 的 
国家 级 保护 区 之 一 ,是 国家 和 四 川 省 命名 的 “科普 教育 基地 "和 "爱国 主义 教育 基地 ”"。 一 /p 二 
</div> 
<div class 一 "con dey"> 
<h3> KJ </h3— 
<img src= "images/dxm. gif" alt=" K fk Jt" />> 
<p> RKE, HKE K, IT go BU tk dk f Bi 34 Fa z fE $£ Su BJ B 25 Ë Ha b pa k. 4⁄2 H 
随 着 古老 的 日 落日 出 而 流 走 , 在 这 里 ,炊烟 依然 安详 , 羊 群 依旧 平静 ,仿佛 所 有 的 静 穆 都 是 一 种 隐 
预 和 暗示 ,这 就 是 美丽 富 伐 的 黄河 大 草原 。 整 个 景区 呈现 出 一 片 壮 丽 的 景象 , 落日 时 分 ,登高 远 
胱 , 唯 有 这 里 才能 体会 到 “ 落 起 与 孤 仪 齐 飞 ,秋水 共 长 天 一 色 " 以 及 “长 河 落日 圆 "之 神韵 。 
</p> 
</div> 
</div> 
</body> 
</html> 


实施 过 程 (每 添加 一 条 声明 后 最 好 验证 其 对 浏览 效果 的 影响 ) 如 下 。 

(1) 了 解 素材 代码 ,并 查看 初始 状态 和 完成 状态 之 间 的 差异 : 二 p 二 标记 的 按 需 显 
示 / 隐 藏 . 显 示 位 置 有 要 求 ,这 就 是 position 属性 和 display 属性 的 应 用 , 悬 停 效 果 的 设置 
就 是 伪 类 :hover 的 应 用 。 

(2) 首先 将 介绍 文字 隐藏 : 给 p 标记 添加 “display :none;” 的 声明 。 

(3) 设置 好 p 标记 的 定位 环境 ,这 里 将 其 所 在 的 父 标 记 作为 定位 环境 : 给 div. con 添 
加 声明 “position: relative;”。 

(4) 设置 p 标记 为 绝对 定位 并 指定 相对 于 定位 环境 的 位 置 : 给 p 标记 添加 声明 : 

position:absolute; 

top:30px; 

left:155px; 

(5) 当 鼠 标 在 相应 位 置 悬 停 时 .显示 对 应 的 一 p 过 标记 ( 即 介绍 文字 ) ,关键 是 要 确认 
位 置 和 位 置 的 定位 表达 ,分 别 给 处 于 悬 停 状态 (使 用 悬 停 伪 类 :hover) 的 容器 div. djz div. 
dxm 和 div. dey 的 子 元 素 p 添加 “display:block;” 的 声明 ; 考虑 到 鼠标 悬 停 在 段落 上 (使 
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悬 停 伪 类 :hover) 段 落 仍 然 要 显示 ,所 以 相应 的 CSS 规则 (以 容器 div. djz 为 例 ) 是 : 


div. djz:hover p, div. djz p:hover{ 
display: block; 
} 


(6) 完成 图 4-45(b) 效 果 的 CSS 规则 如 图 4-46 所 示 ( 注 意 其 中 的 粗 字体 )。 


pí 

width:400px; 
font-size: 13px; 
text-indent:2em; 
display: none; 
position: absolute; 
top:30px; 
left:155px; 

) 

div.coní 

margin-top:20px; 
position: relative; /* 设 置 p 标 记 的 定位 环境 * / 

} 

div.djz:hover p, div.djz p:hover{ 
display:block; 

} 

div. dxm:hover p, div.dxm p:hover{ 
display: block; 

) 

div.dcy:hover p, div.dcy p:hover{ 
display: block; 

) 


图 4-46 ”完成 例 4-7 效果 的 部 分 参考 CSS 


本 章 从 CSS 盒子 模型 开始 ,介绍 了 影响 盒子 元 素 所 占 空 间 的 内 /外 边 距 内 容 的 宽度 
和 边框 等 要 素 ,强调 padding, margin 和 border 这 些 复合 属性 的 使 用 ,这 是 一 种 比较 高 效 
而 简洁 的 一 次 表达 一 堆 信 息 的 方式 。 浮 动 float 与 清除 浮动 clear 属性 是 和 布局 密切 相关 
的 属性 ,本 章 用 大 量 生动 的 实例 循序 渐进 地 引导 读者 体验 这 些 要素 和 属性 ,从 而 掌握 网 页 
的 基本 布局 .多 栏 固定 布局 ,多 栏 固 定 /流动 混合 布局 以 及 多 栏 高 度 方向 的 内 容 自 适应 对 
齐 等 关键 技巧 ; 本 章 在 比较 详尽 地 介绍 了 与 布局 和 显示 密切 相关 的 其 他 技能 如 溢出 
overflow 属性 、 定 位 position 属性 和 显示 display 属性 的 基础 上 ,用 实例 的 方式 介绍 这 些 
属性 的 综合 应 用 。 接 下 来 的 几 章 将 介绍 利用 CSS 对 页 面 内 容 表 现 的 具体 控制 与 实现 。 


选 择 题 
O 影响 块 级 元 素 盒子 所 占 空间 的 因素 是 ( O. 
A. 宽度 ,内 边 距 B. 宽度 、 外 边 距 


C. 宽度 ,边框 D. 外 边 距 边框 宽度 、 内 边 距 
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(2) # # iñ HH “padding-top: 10px; padding-bottom: 15px; padding-left; 20px; 
padding-right:5px;” 的 样式 声明 ,其 等 效 的 复合 声明 是 ( A 
A. {padding:10px 5px 15px 20px; } 
B. {padding:10px 15px 5px 20px; } 


C. {padding:10px 15px 20px 5px; } 
D. {padding:10px, 5px, 15px, 20px; } 
(3) 要 求 两 个 id 属性 值 分 别 为 divl ,div2 的 同 级 相 邻 div 元 素 水 平 并 排 , 且 水 平 间距 
为 30px, 下 述 不 能 实现 该 效果 的 CSS 规则 是 ( ) 。 
A. div#divl{float:left; ) div # div2{ float:left; margin-left:30px;} 
B. div # divl { float: left; margin-right: 20px; } div # div2 { float: left; margin- 
left:10px;} 
C. div# divl {float: left; margin-right: 10px; } div # div2 {float: left; margin- 
left:20px;} 
D. div# div2{float:left; margin-left:30px;} 
(4) 若 给 元 素 div. nav 添加 了 “border-color: blue; border-width:2px; border-style; 
solid;” 的 样式 声明 ,其 等 效 的 CSS 规则 是 ( Jio 
A. div. nav{border:blue 2px solid; } 
B. div. nav{ border: blue, 2px. solid; } 
C. div. nav{border:blue- 2px solid; } 
D. div. nav{border-style: blue 2px solid; } 
(5) 下 述 关 于 float 属性 的 说 法 中 错误 的 是 ( )s 
A. 一 个 未 浮动 的 块 级 元 素 总 是 独占 一 行 
B. 利用 元 素 的 float 属性 可 以 实现 图 文 混 排 或 者 多 栏 布局 的 效果 
C. 一 个 块 级 元 素 若 不 设 定 宽度 , 设 为 浮动 后 其 宽度 是 随 内 容 紧缩 ”的 
D. 一 个 元 素 设置 为 浮动 后 ,对 其 后 面 元 素 的 位 置 没有 影响 
(6) 下 述 关 于 clear 属性 的 说 法 中 错误 的 是 ( )。 
A. clear 属性 对 布局 的 影响 可 以 忽略 
B. 元 素 默认 的 clear 属性 值 none 是 允许 两 边 出 现 浮 动 元 素 
C. 实际 中 常 在 需要 消除 浮动 影响 的 元 素 之 前 添加 一 个 “二 div class= "clear" > 
二 /div 二 ”的 元 素 , 并 为 该 元 素 添加 “. clear{clear:both;}” 的 声明 
D. clear 属性 的 主要 功能 是 消除 浮动 的 影响 
(7) 下 述 关 于 position 属性 的 说 法 中 错误 的 是 ( Ja 
A. 在 默认 的 position 属性 值 static 情形 下 ,元 素 的 位 置 不 受 位 置 属性 top, left 
的 影响 
B. 位 置 属性 top,left 的 参考 点 与 position 的 属性 值 相关 
. 在 任何 情形 下 ,元 素 的 位 置 都 受 位 置 属性 top,left 的 影响 
D. 绝对 定位 常用 于 局 部 的 情形 ,而且 一 般 要 明确 指定 其 定位 环境 


A 
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自主 训练 
练习 4-1: 基于 素材 "ex4\ex4_1. html”, 按 照 要 求 设置 合适 的 CSS 样式 ,实现 如 图 4-47 
所 示 的 效果 。 要 求 如 下 。 nigy nren 
CD) 1 号 div 和 3 号 div 的 大 小 相同 , 宽 和 高 分 别 为 200px 1 ' 
和 60px; 有 边框 的 地 方 厚度 为 5px, 线 型 是 虚线 dashed, f, 2 号 div 
自 定 ; 左 外 边 距 均 为 15px。 D div 攻 
(2) 2 号 div 的 宽 和 高 分 别 为 120px 和 50px; 有 边框 的 地 ! ' 


图 4-47 练习 4-1 效果 图 


方 厚度 为 5px, 线 型 是 实 线 solid, 颜 色 自 定 。 
(3) 2 号 div 与 1 号 div 右 靠 齐 。 
(4) 这 3 个 div 在 垂直 方向 所 占用 的 空间 是 px. 
练习 4-1 配套 素材 ex4_1. html 文件 源 代 码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> k J 3 E fll #F38 BE ñ$ Ek E< /title> 
<style type="text/css" > 
* (margin:0; padding:0; } 


</style> 
</head> 


<body> 


<div class="d1"> 
18 diy 
</div> 
<div class="d2"> 
2 号 div 
</div> 
<div class="d3">3 号 div 
</div> 
</body> 
</html> 


练习 4-2: 基于 素材 “ex4\ex4_2. html”, 给 各 div 添加 合适 的 属性 并 按照 要 求 设置 合 


适 的 CSS 样式 ,实现 如 图 4-48 所 示 的 效果 。 要 求 如 下 。 
(1) 1 # div #l 3 Z div 的 大 小 相同 , 宽 和 高 分 别 为 80px 和 60px; 有 边框 的 地 方 厚度 
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为 5px, 线 型 是 实 线 solid, 颜 色 自 定 。 区 | 
(2) 2 号 div 的 宽 和 高 分 别 为 120px 和 50px; 边框 厚度 Ep ai aq à 
为 5px, 线 型 是 虚线 dashed, 颜 色 自 定 ; 左 外 边 距 均 为 15px。 2 dy i 
(3) 1 号 div 对 齐 2 号 div 的 中 线 。 | 
(4) 这 3 个 div 在 垂直 方向 所 占用 的 空间 是 : px. 
练习 4-2 配套 素材 ex4_2. html 文件 源 代码 : 图 4-48 ”练习 4-2 效果 图 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> # J 3 f fll #F381 BE ñi) Dk W — /vitle> 
<style type="text/css" > 
* (margin:0; padding:0;} 


</style> 
</head> 


<body> 


<div > 

1 号 div 
</div> 
<div > 

2 号 div 
</div> 
<div >3 4 div 
</div> 
</body> 
</html> 


练习 4-3: 基于 素材 “ex4\ex4_3. html”, 按 照 要 求 设置 合适 的 CSS 样式 ,实现 如 
图 4-49 所 示 的 效果 。 要 求 如 下 。 

(1) 1 号 div 和 3 号 div 的 大 小 相同 , 宽 和 高 分 别 为 80px 和 60px; 有 边框 的 地 方 厚度 
为 5px, 线 型 是 实 线 solid, 颜 色 自 定 ; 内 边 距 均 为 5px。 

(2) 2 号 div 的 宽 和 高 分 别 为 120px 和 50px; 边框 厚 
度 为 5px, 线 型 是 实 线 solid, 颜色 自 定 ; 左 外 边 距 均 为 
15px; 内 边 距 均 为 8px。 

(3) 1 div 的 右 侧 与 2 号 div 的 右 侧 对 齐 。 

(4) 3 号 div 的 左 侧 与 2 号 div 的 右 侧 对 齐 。 

图 4-49 练习 4-3 效果 图 (5) 这 3 个 div 在 垂直 方向 所 占用 的 空间 是 ; Dx. 


练习 4-3 配套 素材 ex4_3. html 文件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 

<html xmlns= "http://www. w3.org/1999/xhtml"> 

<head> 

<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 

<title> 理 解 和 体验 盒子 模型 的 各 参数 一 /title> 

<style type="text/css" > 


* (margin:0; } 


</style> 
</head> 


<body> 


<div class="d1"> 
1 号 div 
</div> 
<div class= "d2"> 
2 号 div 
</div> 
<div class="d3">3 号 div 
</div> 
</body> 
</html> 


练习 4-4: 基于 素材 “ex4\ex4_4. html”, 按 照 要 求 设置 合适 的 CSS 样式 ,实现 如 图 4-50 


所 示 的 效果 。 要 求 如 下 。 


(1) 各 div 的 尺寸 参考 图 中 的 文字 说 明 , 单 位 均 为 px。 
(2) 页 面 整 体 居 中 。 
(3) 为 区 分 各 div, 可 给 div 添加 background 或 者 background-color 属性 设置 背 


景色 。 


练习 4-4 配套 素材 ex4_4. html 文件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> 4 t ja 1</title> 
</head> 
<style type="text/css"> 
x {text-align : center; 


font-size:24px; 


Q) xatm css RRS Aae — — — 


尺寸 : 宽 1003 义 高 232 


产品 介绍 
尺寸 : 宽 752X 高 379 


图 4-50 练习 4-4 效果 图 


letter-spacing : 25px; 
margin:0;padding:0; border:0; 
) 

span( 


letter-spacing : normal; 
) 
</style> 


<body> 

<div id=" wrapper" > 

"nav" > {f <br /二 一 span 二 尺寸 : $ 1003X 116</span></div> 
"banner" > # W <br /><span>R +F : 宽 1003X B 232</span></div> 


<div id= "content" > 
<div id= "newproduct" 二 产品 介绍 二 br /><span> Rj: 宽 752X Ë 379</span> </div> 
<div id= "job" 二 招聘 一 br /><span> R: $ 251X 高 379</span></div> 

</div> 

<div class="clear" ></div> 

<div id= "footer" > HH <br /><span> R +F : 宽 1003X 高 82 </div> 


</div> 

</body> 

</html> 

练习 4-5; 参照 如 图 4-51 所 示 的 效果 编写 XHTML 代码 ,并 设置 相应 的 CSS 实现 图 
示 效 果 , 要 求 如 下 。 


(1) 依据 效果 图 ,要 求 XHTML 代码 的 层次 分 明 。 
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应 告 
尺寸: 宽 670X 高 200 


搜索 
尺寸: 宽 230X 高 300 
Eh 外 
边 距 均 为 30 


页 肢 
尺寸 : 宽 670X 高 200 


图 4-51 练习 4-5 效果 图 
(2) 各 div 的 尺 十 和 边 距 按 效果 图 中 的 文字 说 明 ,单位 均 为 px, 


(3) 页 面 整体 居中 。 

练习 4-6: 参照 如 图 4-52 所 示 的 效果 图 编写 XHTML 代码 ,并 设置 相应 的 CSS 实现 
图 示 效果 ,要 求 如 下 。 mm 

01) 依据 效果 图 ,要 求 XHTML 代码 的 层次 分 明 。 RAEES MEES) HEA 

(2) 页 面 整体 居中 。 


(3) 第 1 栏 和 第 2 栏 固定 ,宽度 分 别 为 120px 和 ” 图 452 练习 46 效 果 图 
150px, 第 3 栏 流动 宽度 。 

(4) 三 栏 在 高 度 方向 等 高 且 自 适应 。 

(5) 尝试 用 不 同 的 CSS 规则 和 相应 的 XHTML 实现 同样 的 效果 。 

练习 4-7; 基于 素材 *ex4\ex4_7. html”, 添 加 适当 的 XHTML 代码 ,并 利用 盒子 模型 
中 的 相关 属性 设置 图 4-53(b) 所 示 的 效果 ,并 利用 display 属性 扩大 超 链接 的 单 击 区 域 与 
标题 h4 等 宽 (注意 不 要 修改 h4 的 样式 )。 


购物 


购物 流程 
订单 状态 
常见 问题 册 

易 条 款 册 


订单 状态 
常见 问题 册 


货 到 付款 


售后 服务 


CI 
BA ARRA 
保修 条款 


(a) 初始 化 状态 (b) 完成 状态 
图 4-53 练习 4-7 前 后 效果 图 


练习 4-7 配套 素材 ex4_7. html 文件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 


w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 


<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title2> JH display JÑ fE K < a> bip ñ $ i X </title> 


<style type="text/css"> 
*{ 
padding: 0 ;margin:0 ; text-decoration : none; 
list-style: none; 
) 
body{ 
padding: 3px 0 0 3px;) 
h4( 
background: # A00; 
color: # fff; 
width: 140px; 
text-indent:5px; 
line-height:1. 6em; 
) 


</style> 
</head> 


<body> 
<h> HFM 
<d> 
<li> <a href=" # ">& B iEJJ#</a></li> 
<li><a href="#"> WE < /a></li> 


第 4 章 盒子 模型 与 布局 相关 技术 及 必用 实例 


<li><a href=" # "> 订单 状态 </a> </li> 
<li><a href=" # "> # W,BBJESJjf</a> </li> 
<li><a href=" # ">X ## $< /a></l> 
<li><a href=" # "> B HHMJJf< /a>< /li> 
</ul> 
<h4> 支付 方式 </h4> 
<a 
<li><a href=" # "过 支付宝 </a> </li> 
<li><a href=" # "> 网 银 在 线 </a>> </li> 
<li><a href=" # "之 银 行 转账 </a> </li> 
<li><a href="#" 二 货 到 付款 </a>> </li> 
</ul> 


去 h4> 售 后 服务 </h> 
<ul> 
二 li 这 退货 、 换 货 政策 </li> 
<li> 保修 条 款 </li> 
</u> 
</div> 
</body> 
</html> 


练习 4-8: 基于 素材 "ex4\ex4_8” 文 件 夹 , 利 用 position/display 属性 实现 二 p 二 标记 
位 置 的 控制 .显示 与 隐藏 ,给 页 面 文件 “ex4_8. html” 设 置 合 适 的 CSS 使 其 实现 如 图 4-54(b) 
所 示 的 效果 , 即 二 p 二 标记 的 介绍 文字 是 隐藏 的 , 当 鼠 标 悬 停 在 相应 的 位 置 时 ,介绍 文字 才 
显示 。 


LinkedIn 一 季度 净 亏 损 
pe~ 


职业 社交 网 站 LinkedIn( 领 
英 ) 发 布 2014 财 年 第 一 季度 财 
报 。 财 报 显示 ，LinkedIn 第 一 季 
度 营业 收入 为 4.732 亿 美元 ， 同 比 增 


ee | ; 
为 4.732 亿 美元 ， 同 比 增长 16%; A MIRCO Í| t+6% ; 学 亏 涡 为 1340 万 美元 ,由 
亏损 为 1340 万 美元 ， 同 比 转 亏 。 ks. 


(a) 初始 状态 (b) 完成 状态 


4-54 练习 4-8 效果 图 
练习 4-8 配套 素材 ex4_8. html 文件 源 代 码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 

<html xmlns= "http://www. w3 .org/1999/xhtml"> 

<head> 

<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 

<title2>- IK position/display 属性 一 /title> 

<style type="text/css"> 


ON XHTML+C55 网 页 设计 与 制作 实例 教程 ] 


* {padding:0; margin:0;} 
# content ( 
width:200px; 
margin:2px 0 0 50px; 


} 
h4{ 


text-align: center; 


p( 


font-size:14px; 
text-indent:2em; 

} 

img{ 
border: 1px #000 solid; 
width:150px; 

} 

</style> 


</head> 


<body> 
<div id= "content"> 
<h4> LinkedIn — # EG 8 —/h4> 
<img src= "linkedin.jpg" alt= "LinkedIn" /> 
<p> 职业 社交 网 站 LinkedIn( 领 英 ) 发 布 2014 财 年 第 一 季度 财报 。 财 报 显示 , LinkedIn 
第 一 季度 营业 收入 为 4.732 亿美 元 ,同比 增长 46% ; 净 亏 损 为 1340 万 美元 ,同比 转 亏 。 
</p> 
</div> 
</body> 
</html> 


|==... 
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文字 ,各 种 列表 和 表单 等 标记 的 元 素 内 容 也 大 都 有 文字 ,所 以 网 页 设计 中 很 大 一 部 分 工作 
是 在 处 理 文字 。 一 种 最 简单 有 效 、 最 令 人 满意 的 方法 就 是 使 用 字体 为 网 页 设计 添加 对 比 
效果 ,本 章 的 主要 内 容 是 介绍 利用 CSS 来 实现 网 页 中 文字 的 表现 效果 。 

本 章 标题 中 所 讲 的 字体 和 文本 可 以 联想 到 Office 的 字 处 理 软件 Word 中 的 字体 和 段 
落 , 即 字体 样式 的 主要 属性 是 所 属 的 字体 或 字形 (如 宋体 、 楷 体 等 )、 字 体 大 小 、 颜 色 、 粗 / 斜 
体 和 下 划 线 等 ; 而 文本 样式 的 主要 属性 是 首 行 缩 进行 高 . 字 间 距 和 对 齐 等 ,这 些 属性 是 
考虑 文本 内 部 相互 之 间或 者 文本 与 周围 之 间 关系 的 描述 ,只 对 段落 或 者 标题 这 样 的 文本 
块 才 有 意义 。 


5.1 字体 样式 


字体 font 是 网 站 内 容 品 质 最 直观 的 表现 .CSS 中 用 于 设置 字体 的 主要 属性 和 描述 
如 下 。 

(1) 字体 族 font-family; 设置 文字 的 字体 。 

(2) 字体 颜色 color: 设置 文字 的 颜色 。 

(3) 字体 大 小 font-size; 设置 文字 的 大 小 ,单位 可 以 是 绝对 单位 px 或 者 相对 单位 em 
或 ex。 

(4) 字体 加 粗 font-weight: 设置 文字 加 粗 的 程度 。 

G) 字体 倾斜 font-style: 设置 文字 是 否 倾斜 。 

(6) 字体 修饰 text-decoration: 设置 文字 是 否 有 下 划 线 /删除 线 等 。 

(7) 复合 属性 font: 可 以 在 一 条 声明 中 包含 多 个 的 单 属性 值 ,但 需 符合 规定 。 

字体 样式 的 相关 属性 对 应 Adobe Dreamweaver 中 CSS 对 话 框 的 “类 型 ?选项 卡 ,如 
图 5-1 所 示 ,其 中 的 行 高 Line-height 属性 归 入 文本 样式 更 合适 些 , 所 以 在 5. 2 W rh 
介绍 。 


Q) 人 xhTML+c55 网 页 设计 与 制作 实例 教 生 | — — 


分 类 类 型 
Í Font-fanily Œ): | by 
; Font-size 6): ~ [px ` Font-weight W): ` 
i] 一 一 一 一 
hi Font-style (T): ` Font-variant (V): ` 
Line-height (I) > [= 一 | Text-transform (R): ` 
Text-decoration 0): [underline V) Color C) : [ZJ 
F overline (0) 
“line-through (L) 
回 Wisk®) 
Enone on 
Ez E CE 


Æ 5-1 Dreamweaver 中 CSS 对 话 框 的 “类 型 "选项 卡 
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CSS 用 字体 族 font-family 属性 来 设置 网 页 文字 的 字体 。 但 是 必须 清楚 的 是 : 字体 并 
不 属于 浏览 器 ,而 是 由 其 所 在 的 计算 机 系统 软件 确定 ,网 页 的 设计 者 不 能 预知 用 户 的 计算 
机 中 安装 了 哪些 字体 ,所 以 通过 CSS 来 指定 字体 ,必须 按照 优先 顺序 列 出 字体 名 称 (以 英 
文 逗号 隔 开 ) ,而 且 将 通用 字体 名 称 (如 英文 的 serif 或 sans-serif, 中 文 的 宋体 ) 放 在 最 后 
备用 很 重要 ,这 样 至 少 保证 浏览 器 按 所 需 的 字体 显示 。 如 : 

body{font-family:" 幼 圆 ", "微软 雅 黑 "”, "新 宋体 ", "宋体 "; } 


上 述 CSS 规则 通过 body 标记 为 整个 页 面 指定 了 字体 ,告诉 浏览 器 : 首选 幼 圆 显示 这 
个 文档 ,如 果 没 有 该 字体 , 改 用 微软 雅 黑 , 如 果 没 有 微软 雅 黑 ,就 显示 新 宋体 ,如 果 连 新 宋 
体 也 没有 ,那么 就 用 宋体 。 

font-family 是 一 个 可 继承 的 属性 , 即 它 的 值 会 传递 给 其 所 有 后 代 元 素 。 为 了 统一 页 
面 字体 风格 ,实际 中 利用 body 这 个 顶级 标记 作为 选择 符 设 置 页 面 字体 。 


512 字体 大 小 fort-sze 


font-size 属性 用 于 设置 页 面 字 体 的 大 小 ,设置 字体 大 小 时 ,属性 值 可 使 用 三 种 类 型 : 
采用 px 为 单位 的 绝对 值 . 采 用 em 或 % 为 单位 的 相对 值 和 标准 预先 设置 好 的 单词 (如 x- 
small, small, large 和 x-large 等 )。 有 资料 表明 使 用 单词 是 出 现 问题 最 少 的 ,不 过 使 用 单 
词 需要 高 级 的 CSS 配合 ,才能 保证 在 所 有 浏览 器 上 的 显示 一 致 ,而 且 有 限 的 单词 也 只 能 
提供 有 限 数量 的 字体 大 小 。 

多 数 浏览 器 对 p、span 和 列表 等 标记 默认 的 字体 大 小 是 16px.h3 标题 默认 文本 字体 
大 小 约 为 19px(1.2X16px) ,也 就 是 说 浏 器 的 默认 字体 是 比较 大 的 。 

对 于 中 文 页 面 来 说 ,常用 的 字体 大 小 12px、14px、16px、18px 等 偶数 。 其 中 12px 是 
宋体 能 显示 的 极限 ,虽然 微软 雅 黑 能 显示 更 小 的 字体 .但 应 用 环境 还 不 成 熟 。 宋 体 基本 上 


是 目前 显示 中 文 网 页 唯一 通用 的 Web 字体 ,所 以 12px 成 为 最 常用 的 字体 大 小 。 

12px 的 字体 大 小 如 果 使 用 相对 单位 就 是 默认 字体 大 小 16px 的 3/4 ,那么 就 将 其 设 
置 为 0.75em, 对 应 的 就 有 诸如 “body{font-size:0.75em;)” 的 CSS 规则 ,这 样 页 面 的 其 他 
元 素 如 标题 元 素 都 会 按照 默认 值 的 0. 75 缩小 ; 如 使 用 绝对 单位 对 应 的 CSS 规则 是 “body 
(font-size: 12px;)”, 其 效果 就 使 得 页 面 中 的 所 有 文本 大 小 均 为 12px。 


513 复合 属性 fort 


使 用 font 复合 属性 可 以 在 一 条 声明 中 包含 多 个 属性 值 ,使 CSS 代码 简洁 ,如 p{font: 
bold italic 100% "宋体 ",Arial，sans-serif; } 等 价 于 以 下 4 REH: 


pí 
font-weight:bold; 
font-style: italic; 
font-size: 100% ; 
font-family: "宋体 ", Arial, sans-serif; 

) 

但 是 使 用 font 复合 属性 能 被 浏览 器 正确 解析 的 前 提 是 必须 符合 以 下 两 个 规则 。 

规则 1: 属性 值 中 必须 包含 字体 大 小 font-size 和 字体 族 font-family 这 两 个 属性 值 ， 
并 且 按 照 “ 先 字体 大 小 后 字体 族 ” 的 前 后 顺序 。 

规则 2: 若 声 明 中 还 包含 其 他 属性 值 ( 顺 序 可 随意 ) ,必须 确保 这 些 属性 值 在 字体 大 小 
属性 值 之 前 。 

如 “p{font: bold italic 100% ;)”.“plfont;: bold 100% italic "宋体 ", Arial, sans- 
serif; )” 等 CSS 规则 就 会 被 浏览 器 忽略 ,因为 前 一 条 声明 中 没有 包含 字体 族 的 属性 值 ( 不 
符合 规则 1) ,后 一 条 声明 中 其 他 属性 值 没有 放 在 字体 大 小 属性 值 之 前 (不 符合 规则 2) 。 

以 上 规则 可 精简 为 “ 先 字 体 大 小 后 字体 族 ”。 


5.2 文本 样式 


文本 样式 为 标题 或 者 段落 这 样 的 文本 块 设置 文字 之 间 、 行 之 间 以 及 对 齐 等 样式 ,CSS 
中 用 于 设置 文本 的 主要 属性 和 描述 如 下 。 

(1) 行 高 line-height; 设置 两 行 基线 之 间 的 距离 。 

(2) 字符 间距 letter-spacing: 设置 字 与 字 之 间 的 间隔 。 

(3) 单字 间距 word-spacing: 设置 英文 中 单词 之 间 的 间隔 。 

(4) 水 平 对 齐 方式 text-align; 设置 文本 水 平 对 齐 的 方式 。 

(5) 垂直 对 齐 方式 vertical-align: 设置 文本 垂直 对 齐 的 方式 。 

(6) 首 行 缩 进 text-indent: 设置 段落 或 者 标题 的 首 行 缩 进 。 

文本 样式 的 相关 属性 对 应 Adobe Dreamweaver 中 CSS 对 话 框 的 “区 块 ? 选 项 卡 ,如 
图 5-2 所 示 。 


yertieal-alim V) = 


当 半 过 


Text-din() ` 


Text-indent (I) 
White-space @) ~ 


Display M) ~ 


LT ER [ER ) 
A 5-2 Dreamweaver 中 CSS 对 话 框 的 “区 块 " 选 项 卡 


521 行 高 linehegt 
行 高 line-height 表示 行 与 行 基线 之 间 的 距离 ,而 不 是 行 与 行 之 间 的 空白 距离 ,如 
图 5-3 所 示 。 
行 高 line-height 表 示 行 与 行 基线 之 间 的 距离 ， 
FII ËI 行 基线 


而 不 是 行 与 行 之 间 的 空白 距离 。 1 
图 $-3 行 高 示意 图 


一 般 来 说 行 高 值 必须 大 于 字体 大 小 2px 以 上 才能 保证 字体 的 完整 显示 或 当 作为 链 
接 时 能 显示 下 划 线 ; 行 高 高 出 字体 大 小 的 部 分 ,会 在 文本 的 上 方 和 下 方 平均 分 配 , 下 面 以 
一 个 具体 的 CSS 规则 来 说 明 。 


p{font-size: 14px; line-height: 20px; } 


上 述 CSS 规则 的 字体 大 小 为 14px, 行 高 为 20px, 浏 览 器 会 给 文字 的 上 方 和 下 方 各 加 
上 (20 一 14)/2 一 3px 的 空白 ,这 样 对 于 多 行文 本 . 行 与 行 之 间 会 有 6px 的 空白 ,但 是 对 于 
段落 文本 第 一 行 的 上 方 和 最 后 一 行 的 下 方 则 只 有 3px 的 空白 。 

浏览 器 的 默认 样式 会 将 line-height 设置 为 字体 大 小 的 1. 18 倍 ,这 样 无 论 字 体 大 小 ， 
行 与 行 之 间 都 会 保持 相同 比例 的 间距 。 

设置 line-height 时 ,推荐 使 用 不 带 单位 的 纯 数字 。 使 用 单位 (如 em 或 者 px) 后 浏览 
器 会 把 line-height 看 成 绝对 值 ,这 样 行 高 就 不 会 随 着 字体 大 小 的 变化 而 变化 ,而 导致 因 
为 增加 字体 大 小 而 使 得 行 与 行 相互 重 倒 的 现象 ; 无 单位 的 数值 则 表示 是 所 在 容器 字体 大 
小 的 倍数 ,所 以 将 line-height 设置 为 无 单位 的 纯 数字 是 最 佳 选 择 。 

以 图 5-4 所 示 的 代码 为 例 说 明 设置 有 单位 和 无 单位 行 高 时 的 浏览 效果 对 比 。 


<dl> 
<dt> Ë Ë: line-height 为 有 单位 的 情形 二 /dt 二 
二 dd 二 推荐 使 用 不 带 单位 的 纯 数字 , 当 使 用 单位 后 浏览 器 会 把 line-height 看 成 绝对 值 , 这样 行 高 就 
不 会 随 着 字体 大 小 的 变化 而 变化 ,无 单位 的 数值 则 表示 是 所 在 容器 字体 大 小 的 倍数 。 王 /dd> 
</d> 


图 5-4 XHTML 代码 


[二 [第 5 章 字 人 和 文本 样式 及 必用 实例 ] <>... 


车 给 图 5-4 所 示 的 代码 添加 有 单位 的 行 高 1. 2em, 浏 览 器 就 会 将 计算 后 的 行 高 值 
18px(15X1.2 一 18px) 传 递 给 后 代 元 素 dt 和 dd, 具 有 如 图 5-5 所 示 的 特点 。 


(a) 固定 行 高 


dl{ df 
font-size: l5px; font-size: 15px; 
line-height: 1.2em; ! line-height:1.2em; 
本 dt{ 
font-size:25px; font-size:25px; 
} line-height:18px ; 
si di 
font-size:20px; ENA IA 
} line-height:18px ; 
; 


(b) 后 代 元 素 继承 固定 行 高 值 


图 5-5 有 单位 的 行 高 值 传递 给 后 代 元 素 


若 给 图 5-4 所 示 的 代码 添加 无 单位 的 行 高 1.2, 那 么 后 代 元 素 dt 和 dd 继承 了 这 个 纯 
数字 ,然后 参照 这 个 数字 和 它们 自身 的 字体 大 小 换 成 行 高 值 ( 即 dt 和 dd 的 行 高 分 别 是 : 


25X1. 2=30px 和 20X1.2 一 24px), 具 有 如 图 5-6 所 示 的 特点 。 


dl{ 
font-size:15px; 
line-height:1.2; 
} 
dt{ 
font-size:25px; 
} 
dd{ 
font-size:20px; 


} 


(a) 无 单元 的 行 高 


font-size:15px; 
line-height:1.2; 


font-size:25px; 
line-height:30px: 


font-size:20px; 
line-height:24px; 


(b) 后 代 元 素 的 行 高 


图 5-6 无 单位 的 行 高 值 传递 给 后 代 元 素 一 个 纯 数字 


应 用 图 5-5 和 图 5-6 这 两 种 CSS 规则 的 浏览 效果 分 别 如 图 5-7 Ca) 和 图 5-7(b) 所 示 。 

复合 属性 font 要 遵循 “ 先 字体 大 小 后 字体 族 ” 规 则 ,但 在 实际 应 用 中 很 多 时 候 都 会 在 
字体 大 小 值 上 放 一 个 可 选 的 行 高 值 作为 字体 大 小 的 某 种 附加 值 ,如 : 

font:12px/1.5 "宋体 "; 

注意 : 为 font 属性 设置 行 高 值 是 可 选 的 ,但 是 [font 属性 值 中 若 包 含 了 行 高 值 ,那么 
其 放置 位 置 就 固定 了 ,而 且 必 须 符 合 * 字 体 大 小 和 行 高 之 间 没 有 空格 ,之 间 只 有 一 个 斜 杠 ” 
的 语法 规定 。 


Q [xnrML+css 网 页 设计 与 制作 实例 教程 EP | 


图 5-7 有 /无 单位 的 行 高 浏览 效果 对 比 


522 水 平 对 齐 方式 tet align 

属性 text-align 用 于 确定 元 素 中 文本 在 水 平方 向 的 对 齐 
方式 ,对 应 的 4 个 属性 值 如 下 。 

A) left; 向 左 对 齐 ,默认 值 。 

(2) right; HARF. 

(3) center: 居中 对 齐 。 

(4) justify: 分 散 对 齐 。 

图 5-8 显示 了 利用 属性 text-align 设置 4 个 段落 左 对 齐 、 
右 对 齐 .居中 对 齐 和 分 散 对 齐 的 4 种 效果 。 


523 垂直 对 齐 方式 vetica-aign 图 5-8 4 种 对 齐 方式 


属性 vertical-align 用 于 设置 将 文本 相对 基线 向 上 或 者 向 下 移动 ,上 、 下 的 方向 性 通过 
属性 值 的 正 负 来 控制 ,这 个 属性 最 常见 的 用 途 就 是 用 于 控制 公式 中 的 上 标 或 者 下 标 。 如 
图 5-9 所 示 的 效果 就 是 利用 属性 vertical-align 和 font-size 来 设置 公式 中 下 标 所 实现 的 ,其 中 
图 5-9(a) 、 图 5-9(b) 和 图 5-9(c) 分 别 表示 浏览 效果 .部 分 XHTML 代码 和 对 应 的 CSS, 


图 5-9 属性 vertical-align 的 应 用 


— 5 [第 5 章 字 仙 和 文本 样式 及 必用 实例 ] é... 


524 首 行 缩 进 ted-indert 

属性 text-indent 用 于 设置 文本 块 中 首 行文 本 的 起 始 位 置 ,默认 样式 下 , 首 行文 本 的 
起 始 位 置 与 容器 的 左边 缘 靠 齐 , 如 图 5-10(a) 所 示 。 

text-indent 属性 值 最 好 以 em 为 单位 ,这 样 可 以 与 字体 大 小 成 比例 变化 。 若 为 正 值 ， 
则 文本 首 行 的 起 始 位 置 向 右 移 ,如 图 5-10(b) 所 示 ; 若 为 负 值 , 则 向 左 移 而 伸 出 容器 外 ,这 时 
需要 容器 有 足够 的 左 外 边 距 ,如 图 5-10(c) 所 示 ,否则 文字 有 可 能 被 裁 掉 ,如 图 5-10(d) 所 示 。 


text-indent 用 于 设置 文本 块 中 首 行文 本 的 起 始 位 置 ， 默 认 样 
Nee 首 行 的 起 始 位 置 与 容器 的 左边 缘 靠 齐 。 


(a) 默认 样式 : 无 首 行 缩 进 


属性 text-indent 用 于 设置 文本 块 中 首 行文 本 的 起 始 位 置 ， 首 
TEERAA. 


(b) 对 应 “pftext-indent:2em}”; 


属性 text-indent 用 于 设置 文本 块 中 首 行文 本 的 起 始 位 置 向 左 悬 
挂 2 个 字符 。 


(c) 对 应 *pftext-indent:-2em;margin-left:lem}” 


属性 text-indent 用 于 设置 文本 块 中 首 行文 本 的 起 始 位 置 ， 默 认 样式 
下 ， 首 行 的 起 始 位 置 与 容器 的 左边 缘 靠 齐 。 


(d) 对 应 “pf{text-indent:-2em;margin-left:2em}” 


图 5-10 text-indent 的 不 同属 性 值 的 显示 效果 


属性 text-indent 在 实际 中 的 另 一 个 应 用 效果 是 “以 图 换 字 ”, 这 里 的 “图 ?是 用 于 加 强 
assqa nya ani ei 尽 可 能 包含 网 页 关键 词 , 有 助 于 网 页 被 
搜索 引擎 检索 。 下 面 以 一 个 实例 的 形式 来 说 明 “ 以 图 换 字 ” 的 效果 和 实现 要 点 。 

例 5-1 基于 素材 ch5\exp5-1 文件 夹 ,给 页 面 文件 exp5_1. html 设置 合适 的 CSS 而 
不 是 通过 直接 修改 XHTML 代码 的 方式 完成 用 图 Ji 
片 来 替换 页 面 中 的 文本 ,实现 如 图 5-11 所 示 的 A x a EE 
效果 。 (a) 纯 标题 文本 (b) 图 片 效 

例 5-1 配套 素材 exp5_1. html 文件 源 代码 : 图 5-11 “以 图 换 字 ” 的 效果 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<<title> 体 验 以 图 换 字 的 效果 与 实现 一 /title> 
</head> 
<body> 
<h2>KAÆ</h2> 
</body> 
</html> 


说 明 : 如 果 仅仅 实现 图 5-11 PRR T A A RA img> RKKA, ERE 
情形 下 页 面 的 文档 结构 是 通过 标题 来 组 织 的 ,而 且 标题 对 提高 网 页 被 检索 的 贡献 率 大 于 
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<img> RLP ÁY alt 属性 。 所 以 既 要 利用 标题 来 组 织 文 档 结 构 , 又 要 兼顾 页 面 的 显示 效 
果 , 很 多 时 候 都 有 “以 图 换 字 ” 的 需要 。 利 用 CSS 的 实施 过 程 如 下 。 

(1) 依据 图 片 jiuzhai. gif 的 大 小 设置 h2 标记 的 宽度 和 高 度 分 别 为 100px 和 50px。 

(2) 将 图 片 jiuzhai. gif 设置 为 h2 的 背景 (对 应 的 属性 是 background). 

(3) 浏览 效果 ,发 现 文字 和 背景 同时 出 现 。 

(4) 将 文字 “ 挤 出 ”背景 的 3 条 CSS 规 则 如 下 。 

O 设置 h2 的 文字 缩 进 距离 大 于 h2 的 宽度 。 

@ 文本 不 允许 换行 (white-space:nowrap;)。 

@ 溢出 部 分 隐藏 (overflow :hidden;)。 

(5) 综 上 所 述 , 对 应 的 CSS 规则 如 图 5-12 所 示 。 


h2( 
width:102px; 
height:50px; 
background: url(jiuzhai. gif) ; 
text-indent:102px; 
white-space:nowrap; 
overflow: hidden; 


) 
图 5-12 “以 图 换 字 ”对 应 的 CSS 规则 


注意 : 实现 上 述 的 “以 图 换 字 ? 还 有 一 种 更 简单 的 方式 , 即 给 文本 缩 进 text-indent É, 
性 设置 一 个 超大 的 负数 , 即 一 条 声明 “text-indent:-900px;” 可 以 实现 以 下 三 条 申明 的 效 
果 ( 将 文本 “ 挤 出 ”)。 

"text-indent:102px; 


white-space: nowrap; 
overflow:hidden; " 


5.3 使 用 字体 与 文本 样式 实例 


5.2 节 中 例 5-1 介绍 了 “以 图 换 字 ” 的 实现 要 点 ,本 节 将 以 实例 的 形式 继续 介绍 在 实 
际 的 页 面 设计 中 经 常用 到 的 小 技巧 。 

例 5-2 对 于 宽度 受 限 的 元 素 , 要 求 : 文本 只 在 一 行 中 
显示 ,溢出 的 文本 以 省 略 号 的 方式 隐藏 ,参考 效果 如 图 5-13 
所 示 ,本 例 基于 的 素材 是 ch5\exp5_2. html 文件 。 

例 5-2 配套 素材 exp5_2. html 文件 源 代 码 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 

Transitional//EN" "http://www. w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 

<html xmlns= "http://www. w3.org/1999/xhtml"> 


<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 


图 5-13 ”以 省 略 号 的 方式 隐藏 
多 余 文 本 


字体 和 文本 样 立 及 必用 实例 


<<title> 体 验 多 余 的 文本 用 省 略 号 去 隐藏 二 /title> 
<style type="text/css"> 
*{ 
margin:0; 
padding:0; 
text-decoration : none; 
} 
. book { 
width:40% ; 
margin:12px auto; 
background: # CCC; 
} 
. book h3{ 
line-height : 20px; 
font-size: 14px; 
color: # f60; 
f 
. book h3: hover{ 
color: # 03c; 
) 
.book ul{ 
margin:2px 0 0 2px; 
) 
.book ul li{ 
line-height :22px; 
font-size: 13px; 
} 
.book ul li af 
color: # 111; 
} 
.book ul li a:hover{ 
color: # 03c; 
) 
</style> 
</head> 
<body> 
<div class="book" > 
<h3> #E fi P 8 E AF BtJ E AB TE $e BERI < /h3— 
<ul> 


<li2>.<a href=" # ">H LRZ- W Z 0J 8836 ,— Z45003 #</a></li> 

<li> -<a href=" # "> 让 你 发 现 生活 中 原来 有 很 多 值得 欣赏 的 小 美好 VRR </a ></i> 
<li> -<a href 一 " 井 "让 你 在 积极 乐观 的 生活 态度 下 变 得 充实 而 美满 </a> 王 /li 
<li> -<a hre 二 "# "志愿 你 带 着 爱 和 微笑 去 珍惜 那些 出 现在 生命 中 的 小 美好 </a>></li> 


</ul> 

</div> 
</body> 
</html> 
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实现 过 程 如 下 。 

(1) 浏览 素材 的 页 面 效 果 , 改 变 浏览 器 的 窗口 大 小 ,就 会 发 现 : 当 窗口 缩小 到 一 定 程 
度 ,原本 一 行 显示 的 文本 就 会 多 行 显示 。 

(2) 控制 文本 一 行 显示 ( 即 不 换行 ), 且 多 余 的 文本 以 省 略 号 的 形式 隐藏 : 给 元 素 
.book ul li 添加 以 下 三 条 声明 即 可 。 


white-space:nowrap; /* 声 明 1: 用 于 控制 文本 不 换行 */ 
textroverflow:ellipsis; /* 声 明 2: 用 于 实现 发 生 文本 溢出 时 显示 省 略 号 * / 
overflow:hidden; /* 声 明 3: 隐藏 溢出 的 部 分 * / 


例 5-3 体验 “以 图 换 字 ”、 首 字 下 沉 和 其 他 的 字体 /文本 样式 ,本 例 基于 的 素材 是 
ch5\exp5-3 文件 夹 ,给 页 面 文件 exp5_3. html 设置 合适 的 CSS 实现 如 图 5-14 所 示 的 效 
果 , 需 要 使 用 素材 中 的 图 片 文件 exp3. jpg。 


(a) 设置 之 前 


图 5-14 字体 /文本 样式 应 用 


例 5-3 配套 素材 exp5_3. html 文件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> 1 R FAFE ER </title> 
<style type="text/css"> 

* (padding:0; margin:0;border:0; 

font-size: 13px;} 
# content{ 
width:250px; 
margin:2px auto; 


background: # 7b5 ; 


# content img ( 
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width: 230px; 
height: 150px; 
border:2px # fff solid; 
margin-left: 8px; 
} 
</style> 
</head> 
<body> 
<div id= "content" > 
<h3> KA</h3> 
<img src= "images/dcy. gif" alt= " K W J" />> 
<p> LAKE, AKE K, IT z t BOKER H z tE £ 25 J 88 2 Ë Ha Hb gq k. 42 H 
随 着 古老 的 日 落日 出 而 流 走 , 在 这 里 ,炊烟 依然 安详 , 羊 群 依旧 平静 ,仿佛 所 有 的 静 穆 都 是 一 种 隐 
预 和 暗示 ,这 就 是 美丽 富饶 的 黄河 大 草原 。 整 个 景区 呈现 出 一 片 壮丽 的 景象 ,落日 时 分 , 登高 远 
姚 , 唯 有 这 里 才能 体会 到 * 落 霞 与 孤 仪 齐 飞 ,秋水 共 长 天 一 色 " 以 及 “长 河 落日 圆 " 之 神韵 。 
</p> 
</div> 
</body> 
</html> 


实现 过 程 如 下 。 

(1) 浏览 素材 的 页 面 效 果 。 

(2) 实现 标题 h3 的 “以 图 换 字 ” 参考 标题 背景 图 片 文件 images/h3_dcy_bg. gif 的 
尺寸 100X50px 设置 h3 元 素 的 大 小 ,并 给 h3 设置 一 个 很 夸张 的 首 行 缩 进 将 其 挤 出 h3 所 
在 的 “盒子 ”, 然 后 设置 其 背景 , 即 给 h3 元 素 添加 以 下 4 条 参考 声明 。 

width:100px; 

height:50px; 


text-indent:-1000px; 
background: url(images/h3_dcy_bg. gif) no-repeat; 


# content p:first-letter{ 
(3) 实现 段落 的 首 字 下 沉 两 行 , 利用 段落 p 的 伪 人 
元 素 : :first-letter 作为 选择 符 设置 如 图 5-15 所 示 的 Pont ental 
CSS 规则 。 ) 


(4) 实现 段落 左右 两 边 的 空隙 相等 : 参考 一 img 二 ”图 5-15 首 字 下 沉 两 行 的 CSS 规则 
元 素 的 宽度 ,设置 p 的 宽度 ,利用 margin rh “auto” JA 
性 值 使 左右 两 边 的 空隙 相等 , 即 给 p 元 素 添 加 如 下 的 声明 。 


width:230px; 


margin:8px auto; 
(5) 段落 的 行 间距 和 颜色 的 参考 声明 如 下 : 


line-height:1.3; 
color: # ffc; 


本 章 在 介绍 了 字体 样式 和 文本 样式 主要 属性 的 基础 上 :以 实例 的 方式 介绍 了 在 实际 
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的 页 面 设计 中 经 常 要 用 到 的 “以 图 换 字 ”、 溢 出 文本 用 省 略 号 表示 和 文本 在 容器 中 的 布局 
等 与 字体 /文本 样式 主要 属性 相关 的 一 些 技巧 及 实现 。 


选 择 题 

(1) 若 要 改变 文本 的 颜色 ,应 使 用 的 属性 是 ( e 

A. font-color B. font-size C. color D. font-weight 
(2) 若 要 取消 文本 的 下 划 线 ,应 使 用 的 属性 是 ( Yi 

A. font-style B. font-decoration C. text-decoration D. font-weight 
(3) 若 要 文本 首 行 缩 进 , 应 使 用 的 属性 是 ( Js 

A. text-indent B. line-height 

C. text-align D. letter-spacing 


(4) 以 下 关于 行 高 line-height 的 说 法 中 错误 的 是 ( Jy 
A.“line-height:1. 2” 的 声明 表示 行 高 不 会 随 着 字体 大 小 的 变化 而 变化 
B.“line-height:1. 2” 的 声明 表示 行 高 会 随 着 字体 大 小 的 变化 而 变化 
C. 行 高 line-height 表示 行 与 行 基 线 之 间 的 距离 
D. 行 高 line-height 表示 行 与 行 之 间 的 空白 距离 
(5) 以 下 无 效 的 CSS 规则 是 (  )。 
A. pí font:bold italic 15px "宋体 ”;} 
B. pifont:bold 15px italic "宋体 ",Arial，sans-serif; } 
C. pffont:bold 15px "宋体 ",Arial，sans-serif; ) 
D. p{font:bold italic 15px/1. 2 "宋体 ",Arial, sans-serif; } 


自主 训练 


练习 5-1: 基于 素材 ex5\ex5-1 ,给 页 面 文件 ex5_1. html 中 的 元 素 添加 合适 的 id 或 
class 属性 ,然后 设置 合适 的 CSS 样式 ,使 页 面 实现 如 图 5-16 所 示 的 效果 (或 参考 素材 
ex5\ex5-1 的 图 片 文件 “练习 5_1.JPG”)。 要 点 如 下 。 

(1) 标题 h2 实现 以 图 换 字 且 居中 的 效果 。 

(2) 第 1 个 h3 标题 有 居中 背景. 字 间 距 和 宽度 ( 按 父 容器 的 50% 来 设置 ) 要 求 。 

(3) 前 两 个 段落 有 首 行 缩 进 2 字符 的 要 求 。 

(4) 倒数 第 1.2 段 的 首 字 母 有 2 倍 于 其 他 文字 要 求 , 首 行 缩 进 是 负数 。 

(5) 文本 的 行 间 距 和 对 齐 尽 量 与 效果 图 接近 。 

练习 5-1 配套 素材 ex5_1. html 文件 源 代码 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 


w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns= "http://www. w3.org/1999/xhtml"> 


m y yy y [第 5 章 00890 ] OA | 


云 计算 平台 
-o 7 maanen 
= | 


国际 数据 公司 IDC 最 新 公布 的 数据 显示 2010 年 中 国 歼 据 中 心 总 数量 已 经 达到 504 155 个 。 

panenn, 全 国 已 有 13 个 省 市 自治 区 规划 了 30 个 左右 的 10 万 台 服务 器 以 上 规模 的 大 
据 中 心 建设 项 目 ， 项 目 总 投资 达 2700 亿 元 。 

的 业内 人 士 纷纷 在 促进 云 计算 进入 商用 阶段 的 同时 
建 训 刘 多 训 的 数据 中 心 投资 。 那 么 相 比 于 传统 的 数据 中 心 ， 所 谓 的 ~ 人 

"， 除 了 规模 化 、 集 中 程度 更 高 ， 可 见 的 基础 设施 与 传统 数据 中 心 差异 并 不 会 很 
BERNAR, JAS0BER35 0885. oea fz ARE hi SA qu saphin 
个 阶段 ， 托 官 型 管理 服务 型 、 托 管 管理 型 和 云 计 算 管理 型 (就 是 所 谓 的 云 计算 数据 中 心 ) 。 


Zisary qa 
T HNCAPERATARAROSOANAR. EA PEAEE NEN CARRERA TNEWS CARNE 
FUGRFEAREIR OANA REM G Ruas, #ATUMRCRTRISYRCARRENEN. 


TEENER TARNOTIRPRES ERETTA CASEARNEI (IMFËSOK DEFMEERNTË, pix 


AED. OAPARAKMHNRENER BeGmtk5s. 
surua nm: 20140501 


图 5-16 练习 1 效果 图 


<head> 
<<title> 字 体 与 文本 样式 综合 练习 一 /title> 
<style type="text/css"> 
* (margin:0; padding:0; color: #000; } 
# container( 
width:80% ; 
margin:0 auto; 
) 
</style> 


</head> 
<body> 
<div id="container"> 

<h> SH 8 H 5 8 8 F 6 </h2> 

<h3> ZA htt: < /h3>— 

<p 二 国际 数据 公司 IDC 最 新 公布 的 数据 显示 2010 年 中 国 数据 中 心 总 数量 已 经 达到 504 155 个 。 
截至 2012 年 3 月 ,全 国 已 有 13 个 省 市 自治 区 规划 了 30 个 左右 的 10 万 台 服 务 器 以 上 规模 的 大 型 
数据 中 心 建设 项 目 ,项 目 总 投资 达 2700 (656. </p> 

<p 二 产业 界 敦 促 云 计算 落地 的 呼声 愈演愈烈 ,业内 人 士 纷 纷 在 促进 云 计算 进入 商用 阶段 的 同 
时 建议 避免 盲目 的 数据 中 心 投资 。 那 么 相 比 于 传统 的 数据 中 心 ,所谓 的 “下 一 代 云 计算 数据 中 
心 ”, 除 了 规模 化 、 集 中 程度 更 高 ,可 见 的 基础 设施 与 传统 数据 中 心 差异 并 不 会 很 大 ,但 是 服务 会 不 
断 升级 。 从 提供 的 服务 方面 划分 ,数据 中 心 向 云 计算 数据 中 心 进 阶 的 过 程 可 以 划分 为 四 个 阶段 ， 
托管 型 ,管理 服务 型 .托管 管理 型 和 云 计算 管理 型 (就 是 所 谓 的 云 计 算数 据 中 心 )。 二 /p 二 

二 h3 二 云 计算 应 用 平台 架构 二/h3 二 

<p > 云 计 算 应 用 平台 采用 面向 服务 架构 SOA 的 方式 ,应 用 平台 为 部 署 和 运行 应 用 系统 提供 
所 需 的 基础 设施 资源 应 用 基础 设施 ,所 以 应 用 开发 人 员 无 须 关心 应 用 的 底层 硬件 和 应 用 基础 设 
施 , 并 且 可 以 根据 应 用 需求 动态 扩展 应 用 系统 需 的 资源 。 志 /p> 

二 p> 完 整 的 应 用 平台 提供 如 下 功能 架构 包含 应 用 运行 环境 .应 用 全 生命 周期 支持 (提供 开发 
SDK IDE 等 加 快 应 用 的 开发 .测试 和 部 署 ) 应 用 使 用 所 消耗 的 计算 资源 和 集成 复合 应 用 构建 能 
力 等 。 </p> 
二 h6 二 来 源 于 百度 Hi: 2014-05-01</h6> 
</div> 
</body> 
</html> 
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练习 5-2; 基于 素材 ex5\ex5-2 ,给 页 面 文件 ex5_2. html 中 元 素 div # sub_con 所 包 
含 的 子 元 素 h3、p 和 h6 设置 合适 的 CSS 样式 ,使 页 面 实现 如 图 5-17 所 示 的 效果 (或 参考 
素材 文件 夹 中 的 图 片 文 件 ex5_2. jpg) 。 


郁金香 
郁 全 香 为 多 年 生 草本 植物 ， 长 约 ? 厘 
米 ， 县 棕 褐色 表 反 。 郁金香 的 花语 为 博爱 
体贴 高 雅 富贵 能 干 取笑 。 
百度 词 条 孝 全 香 


玫瑰 

玫瑰 ， 属 车 燕 目 ， 车 薇 科 范 叶 灌木 ， 精 
图 形 ， 有 边 刺 。 玖 瑰 的 花语 为 爱情 、 爱 与 
X. RARR. 


EMIR 
图 5-17 效果 图 
练习 5-2 配套 素材 ex5_2. html 文件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. had" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> s Ik/ X FE 83] < /vitle> 
<style type="text/css"> 
* (padding:0; margin:0; font-size: 12px; } 
div. wrapper { 
width:300px; 
margin:5px auto; 
) 
div.coní 
float:left; 
width:100% ; 
height:98px; 
background: url(images/con_bg. png) no-repeat; 
) 
div.con pí 
float:left; 
margin:10px 2px 10px 5px; 
+ 
div.con p img:hover{ 
background: # 03f; 
} 
div.con p img{ 
width:68px; 
height:68px; 
padding:2px; 
background: # fcc; 
) 


div. con div. sub_con{ 
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float:right; 
width:216px; 
margin-right: 5px; 
margin-top:5px; 
) 
</style> 
</head> 


<body> 
<div class= "wrapper" > 
<div class= "con"> 
<p><img src= "images/tulipa.jpg" alt= "#j £$ #" /></p> 
<div class= "sub_con"2> 
二 h3 郁 金 香 </h3 二 
三 p 郁 金 香 为 多 年 生 草 本 植物 ,长 约 2 厘米 , 具 棕 褐色 表皮 。 郁金香 的 花语 为 博爱 、 体 
W RE A AEF E. </p> 
<h6> A BE J 4-4 £ #< /h6> 
</div> 
</div> 
<div class= "con" > 
<p><img src= "images/rose.jpg" alt=" 玫 瑰 " /></p> 
<div class= "sub_con"> 
达 h3 二 玫瑰 </h3 二 
去 p> 玫 瑰 , 属 蔓 薇 目 , 茧 薇 科 落 叶 灌木 ,椭圆 形 ,有 边 刺 。 玫 瑰 的 花语 为 爱情 、 爱 与 美 、 
RAME. </p> 
<h6> A BF 2-8: </h6> 
</div> 
</div> 
</div> 
</body> 
</html> 


网 页 上 的 图 片 依据 其 功能 可 以 分 为 两 大 类 : 一 类 是 内 容 图 片 (如 人 、 产 品 和 风景 图 
片 ) , 它 是 网 页 实质 性 内 容 , 若 缺少 它 , 内 容 就 缺失 或 者 信息 不 充分 ; 第 二 类 图 片 是 装饰 性 
图 片 ,用 来 加 强 网 页 的 视觉 效果 ,如 按钮 图标. 背景 图 像 和 用 于 边框 /区 域 划 分 的 背景 图 
片 等 。 其 中 内 容 图 片 是 使 用 过 img 之 标记 将 图 片 载 和 人 到 页 面 中 ; 而 装饰 性 图 片 是 通过 
CSS 的 背景 样式 引入 的 ,本 章 将 系统 地 介绍 CSS 中 背景 样式 及 应 用 。 


6.1 背景 样式 


背景 作为 元 素 (也 可 理解 为 盒子 ) 的 “墙纸 ”, 它 可 以 是 颜色 或 者 图 片 或 者 兼 而 有 之 ,使 
作为 元 素 内 容 的 其 他 文字 或 者 图 像 显 示 于 其 上 ,以 增加 页 面 的 表现 力 和 视觉 的 冲击 力 。 
CSS 中 用 于 设置 背景 的 主要 属性 和 描述 如 下 。 

(1) 背景 颜色 background-color: 设 定 元 素 的 背景 颜色 。 元 素 默认 样式 的 背景 颜色 
是 透明 的 ,所 以 要 让 XHTML 元 素 显示 为 盒子 特征 的 最 简单 方式 之 一 就 是 为 元 素 添加 一 
个 背景 色 , 如 p{background-color: #00f;}) 的 CSS 规则 就 是 给 p 元 素 设置 了 一 个 蓝 色 
背景 。 

(2) 背景 图 像 background-image: 设 定 元 素 的 背景 图 像 ,图 像 文件 应 采用 相对 路 径 。 
语法 是 background-image:url( 相 关 路 径 \ 图 片 文件 ) 。 

(3) 图 像 位 置 background-position: 指定 背景 图 像 的 左上 角 相对 于 元 素 左上 角 在 
水 平方 向 和 垂直 方向 的 偏 移 位 置 。 语 法 是 background-position: 水 平 位 置 垂直 位 置 。 
在 默认 样式 下 水 平 位 置 和 垂直 位 置 均 为 0, 即 背 景 图 片 的 左上 和 角 与 元 素 的 左上 角 
重合 。 

(4) 背景 重复 background-repeat: 决定 背景 图 像 如 何 被 重复 或 者 平 铺 ,其 属性 值 有 : 
repeat-x, repeat-y, repeat .no-repeat* 默 认 值 是 repeat ,表示 背景 图 片 在 元 素 的 水 平方 向 和 
重 直 方向 都 平 铺 。 

(5) 复合 属性 background: 可 以 在 一 条 声明 中 包含 上 述 多 个 单 属性 值 , 且 无 须 考虑 
属性 值 的 顺序 。 如 图 6-1(a) 的 4 条 单 属 性 样式 声明 等 价 于 图 6-1(b) 一 条 复合 样式 的 声 
明 。 从 页 面 优化 的 角度 建议 在 实际 中 尽量 采用 这 种 简洁 高 效 的 复合 属性 声明 。 
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background-image: url( bgl . jpg) ; 


background-repeat: no-repeat; 


background-position: left bottom; background: url(bgl.jpg) no-repeat 
background-color: # FFF; left bottom # FFF; 
(a) 单 属 性 的 声明 方式 (b) 复合 属性 的 声明 方式 


图 6-1 背景 样式 的 复合 属性 和 单 属 性 的 声明 对 比 


需要 说 明 的 是 : 当 给 元 素 同 时 设置 背景 色 和 背景 图 像 时 , 相 重 要 的 部 分 背景 图 像 优 
先 , 即 在 背景 图 像 不 能 覆盖 的 区 域 才 显示 背景 色 。 
背景 样式 的 相关 属性 对 应 Adobe Dreamweaver 中 CSS 对 话 框 的 “背景 ”选项 卡 , 如 


Background-color (C): [TJ 


Background-inage(I): 
Background-repeat (R) : 
Background-attachnent (T) : 
Background-position (X): 


Background-position (Y): 


图 6-2 Dreamweaver 中 CSS 对 话 框 的 “背景 "选项 卡 


6.2 背景 样式 应 用 举例 


背景 样式 的 应 用 非常 灵活 ,其 前 提 是 在 总 体 布局 已 规划 好 ,而 且 对 元 素 的 背景 需求 明 
确 . 相 关 素材 也 准备 就 绪 的 情形 下 进行 的 ,本 小 节 以 实例 的 方式 来 说 明 。 

例 6-1 利用 * 小 图 片 ” 的 平 铺 实现 大 背景 图 片 的 效果 。 基 于 素材 中 ch6\exp6-1 文件 
夹 ,通过 给 页 面 文件 exp6_1. html 中 的 页 眉 页 脚 和 侧 栏 标题 设置 背景 ,实现 如 图 6-3(b) 
所 示 效 果 。 

例 6-1 配套 素材 exp6_1. html 文件 的 源 代码 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 

w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 


<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 


RAKE BHAKHAR 


页 欧 区 域 S Eneas 


Li 
SEFERE SEHSTEARER 


(a) 设置 背景 之 前 的 效果 


到 栏 标量 由 沾 图 片 与 攻取 合成 府 景 


(b) 设置 背景 之 后 的 效果 


图 6-3 ”利用 小 图 片 制作 大 背景 效果 


<meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" /> 


<title> 体 验 小 图 片 制作 大 背景 一 /title> 


<style type="text/css"> 
*{ 
margin:0; 
padding:0; 
color: # 000; 
font-size:15px; 
; 
# wrapper{ 
width:800px; 
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margin:2px auto; 
} 
# header{ 
height: 130px; 
margin-bottom :10px; 
) 

# header h2{ 
text-align:center; 
padding-top:40px; 

} 

# main # content{ 

height:400px; 

float:left; 

width:550px; 

border-right: 1px solid #06f; 

} 


# main # content hl{ 
text-indent:1.5em; 
line-height:1.2em; 
width:545px; 
Íont-size:20px; 
margin-bottom: 8px; 

) 

# main # content pí 
width:488px 
text-indent: 2em; 

) 

# main # sider( 
float:right; 
width:244px; 

) 

# sider h3 ( 
height:24px; 
text-indent:6px; 
line-height:26px; 

) 

# sider p{ 
text-indent: lem; 
margin-top: 8px; 
color: # 399; 

1. 

.clearfclear:both;} 

# footer { 

height:40px; 

} 

# footer p{ 

height:32px; 
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line-height :32px; 
text-align: center; 


} 


</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id= "header"> 
<h2> HJA KI, HEH t E X # St < /h22> 
</div>< !--header_End--> 
<div id= "main"> 
<div id= "content" > 
<h1> JBI F# #</h1> 
二 p> 页 面 : 800xX130</p> 
<p> EKA: 550X400</p> 
二 p> 侧 栏 的 宽度 : 245</p> 
<p> WB: 800x130</p> 
</div>< !--content_End--> 
<div id= "sider"> 
<h3>—WWE b Bi < /h3 > 
二 p 二 侧 栏 标 题 由 小 图 片 与 颜色 合成 背景 </p 二 
</div>< !--sider_End--> 
<div class="clear" ></div> 
</div>< !--main_End--> 
<div id="footer"> 
一 p>> 页 脚 区 域 ,用 小 图 片 制作 大 背景 一/p>> 
</div>< !--footer_End--> 
</div>< !--wrapper_End--> 
</body> 
</html> 


说 明 : 通过 查看 素材 ,发 现 提供 的 3 张 图 片 都 是 不 到 1kB 的 文件 ,而 图 6-3(b) 中 的 背 
景 图 片 看 起 来 是 比较 大 的 ,这 是 使 用 背景 样式 中 的 属性 值 来 完成 的 ,这 本 身 也 是 使 页 面 更 
轻巧 来 实现 网 页 优化 的 一 种 技术 手段 。 

实施 过 程 如 下 。 

(1) 了 解 页 面 的 XHTML 代码 结构 和 相关 CSS 规则 。 

(2) 给 整个 页 面 设置 背景 ; 给 body 标记 添加 “background: # e8f5ff;” 或 者 
“background-color: # e8f5ff ;” 的 声明 。 

(3) 给 页 眉 设 置 背景 ,给 id 选择 符 # header 添加 “background: url(images/header_ 
bg. jpg) repeat-x; ”的 样式 声明 ,repeat-x 表示 在 水 平方 向 平 铺 。 

(4) 给 页 脚 设置 背景 ,给 页 脚 添 加 “background: url(images/footer_bg. jpg) repeat-x; ”的 
样式 声明 。 

(5) 给 侧 栏 标题 设置 背景 : 由 于 给 侧 边 栏 提供 的 背景 只 是 一 个 1/4 圆 角 图 片 ,而 且 是 


单 色 ,通过 Photoshop 确认 其 颜色 ( 色 号 是 井 f90) 
即 可 ; 其 次 图 片 背景 是 在 侧 栏 标题 的 右 侧 ,而 且 只 
显示 一 次 ( 即 不 平 铺 no-repeat) ,所 以 给 侧 栏 标题 
添加 “background: # f90 url (images/corner. gif) 
no-repeat top right;” 的 样式 声明 即 可 。 这 里 侧 栏 
标题 的 背景 中 同时 包含 颜色 和 图 片 , 按 图 片 优先 显 
示 原 则 。 

(6) 最 后 给 主 标题 “页 面 尺 寸 参考 ?设置 一 条 
边框 线 ,给 主 标题 添加 “borderbottom:1px dashed 
#999;” 的 样式 声明 。 

注意 在 添加 样式 声明 的 过 程 中 ,最 好 是 每 添加 
一 条 ,就 验证 一 下 效果 ,这 是 很 好 的 习惯 。 

例 6-2 让 背景 实现 在 一 定 范围 内 的 “内 容 高 
度 自 适应 ”, 如 图 6-4(a) 、 图 6-4(b) 和 图 6-4(c) 所 示 
使 用 同一 幅 背 景 图 片 ,但 所 包含 的 内 容 不 同 , 通 过 
编写 适当 的 CSS 规则 可 实现 这 一 需求 ,本 例 的 素 
材 在 ch6\exp6-2 文件 夹 。 
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秋季 


秋季 《autumn，falD) 是 一 年 四 季 
之 第 三 季 ， 是 由 夏季 到 冬季 的 过 渡 


(a) 内 容 较 少 


秋季 


秋季 (autumn, fall) 是 一 年 四 季 
Sa 二 季 ， 是 由 夏季 到 冬季 的 过 渡 季 

节 ， 阴 历 为 7 月 立秋 到 9 月 立冬 ， 阳 历 
为 8 至 11 月 ， 天 文 为 秋分 到 冬至 这 一 
气象 工作 者 研究 的 物候 学 标 


(b) 增加 一 些 内 容 


秋季 


秋季 (autumn, fal) 是 一 年 四 季 
之 第 三 季 ， 是 由 夏季 到 冬季 的 过 渡 李 
节 ， 阴 历 为 7 月 立秋 到 9 月 立冬 ， 阳 历 
为 9 至 11 月 ， 天 文 为 秋分 到 冬至 这 一 
段 时 间 。 气象 工作 者 研究 的 物候 学 标 
准 是 : 炎热 过 后 ， 五 天 平均 气温 稳定 
在 22° -C 以 下 时 就 站 进入 了 秋季 ， EF 
10"C 时 秋季 结束 。 


(c) 再 增加 一 些 内 容 


例 6-2 配套 素材 exp6_2. html 文件 源 代码 : 图 6-4 ”让 背景 实现 “内 容 高 度 自 适应 ” 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<<title> 体 验 固定 大 小 的 背景 图 片 在 内 容 高 度 上 的 一 定 程度 的 自 适应 一 /title> 
<style type="text/css"> 
*{ 
margin:0; padding:0; color: # 000; 
) 
div.main { 
width:240px; 
margin:3px auto 8px; 
background-color: # FFc; 
) 
div. main h2 ( 
width:210px; 
padding:15px 15px 0 20px; 
) 
div. main p{ 
width:202px; 
margin:0 auto ; 
padding-bottom: 8px; 


font-size:12px; 
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line-height:1.2em; 
text-indent:2em; 


} 


</style> 
</head> 
<body > 
<div class=" main" > 
<h2>##</h2> 
—p>#k3F(autumn, fall) 是 一 年 四 季 之 第 三 季 , 是 由 夏季 到 冬季 的 过 渡 季 节 …… </p> 
</div> 
<div class= "main" > 
<h2>#K#</h2> 


<p>$kĒ (autumn, fall) 是 一 年 四 季 之 第 三 季 , 是 由 夏季 到 冬季 的 过 渡 季 节 , 阴 历 为 7 月 立 
秋 到 9 月 立冬 ,阳历 为 9 至 11 月, 天文 为 秋分 到 冬至 这 一 段 时 间 。 气 象 工作 者 研究 的 物候 学 标准 
ieee </p> 
</div> 
<div class= "main" > 
<h22>##</h2> 
p> #kš(autumn, fall) 是 一 年 四 季 之 第 三 季 , 是 由 夏季 到 冬季 的 过 渡 季 节 , 阴 历 为 ?月 立 
秋 到 9 月 立冬 ,阳历 为 9 至 11 月 ,天 文 为 秋分 到 冬至 这 一 段 时 间 。 气象 工作 者 研究 的 物候 学 标准 
是 : 炎热 过 后 ,五 天 平均 气温 稳定 在 22 仿 以 下 时 就 算 进入 了 秋季 , 低 于 10'C 时 秋季 结束 。 </p> 


</div> 
</body> 
</html> 
实施 过 程 如 下 。 
O) 了 解 页 面 的 XHTML 代码 结构 和 相关 CSS 规则 ( 父 容器 ,标题 和 段落 的 样式 已 
设置 好 ) ,浏览 页 面 效 果 。 
(2) 本 实例 的 XHTML 结构 层次 如 图 6-5 所 示 , 让 背景 实 
现 所 谓 的 “内 容 高 度 自 适应 ”, 其 要 点 是 给 父 元 素 (本 例 是 div. 
main) 和 第 一 个 子 元 素 (本 例 是 h2) 设 置 同一 个 背景 图 片 ,并 留 | = P 
意 背景 图 片 的 位 置 设置 。 


` i — mos 代码 层次 结构 
(3) 给 父 元 素 div. main 设置 背景 ,位 置 是 左下 角 , 即 给 它 添 


加 “url(images/link_con_bg. gif) no-repeat left bottom;” 的 样式 声明 。 

(4) 给 第 一 个 子 元 素 h2 设置 背景 , 即 给 它 添加 “background: url(images/link_con_ 
bg. gif) no-repeat ;” 的 样式 声明 。 浏 览 效 果 即 可 。 

本 例 呈 现 的 是 这 类 需求 的 条 件 和 实现 要 点 ,至 于 “内 容 自 适应 的 高 度 ” 的 范围 请 读者 
自行 琢磨 。 

例 6-3 利用 CSS SpriteCCSS 图 片 戏 入 ,意译 为 CSS 精灵 ) 实 现 背景 图 片 的 按 需 
显示 : 基于 素材 ch6\exp6-3 文件 夹 .给 页 面 文件 exp6_3. html 列表 项 中 的 a 标记 设 
置 背景 图 片 和 悬 停 时 的 背景 图 片 ,使 页 面 文件 exp6_3. html 实现 如 图 6-6 所 示 的 
效果 。 


畅销 书 排行 榜 


说 话 的 魅力 : 刘 塘 沟通 秘 签 1 | 


当时 忍 住 就 好 了 (性 格 自修 齐 2 | 当时 忍 住 就 好 了 (性 格 自修 课 2 | 

自控 力 (大 学 的 心理 学 课 种 3 | 自控 力 (大 学 的 心理 学 课 各 3 | 

生 合 中 最 美好 的 事 都 是 免费 的 。 4 | 生命 中 最 美好 的 事 都 是 免费 的 a | 
(a) 正常 状态 (b) 鼠标 悬 停 状态 


图 6-6 CSS Sprite 的 应 用 


例 6-3 配套 素材 exp6_3. html 文件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 

<html xmlns= "http://www. w3.org/1999/xhtml"> 

<head> 

<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 

<title> fki CSS Sprite KM </title> 

</head> 


<style type="text/css"> 
*{ 
margin:0; 
padding:0; 
list-style: none; 
text-decoration : none; 
J! 

# wrapper{ 
margin:5px auto; 
width:246px; 

) 

# wrapper h2 ( 
background: # f90 url(images/corner. gif) top right no-repeat; 
height:25px; 
color: # fff; 
text-indent:lem; 
font-size:16px; 
line-height :25px; 

) 

# content li af 

display: block; 
font-size: 14px; 
font-weight: bold; 
color: # 666; 

text-indent: lem; 
line-height :35px; 
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height: 42px; 
padding-top:8px; / * 保证 a 的 高 度 是 50px, 与 背景 高 度 吻合 * / 


} 
# content li a:hover( 
color: # 39F; 
) 
</style> 
<body> 
<div id=" wrapper" > 
<h> HBH <h> 
<ol id= "content" > 
<li id="nl"><a href=" # ">H W EJ XWA E 89282 — /a> < /li> 
<li id="n2"><a href=" # "> HH ZERE Y ER AER < /a></li> 
<li id="n3"><a href=" # "> B HKF HOF W EE </a ></i> 
<li id="n4"><a href=" # ">Æ fi P 8 3: t$ hh R AJE e RAI </a> </li> 
</> 
</div> 
</body> 
</html> 


说 明 : 

A) 本 例 提 及 的 CSS Sprite 中 译 为 “CSS 精灵 ”, 它 是 由 因 CSS 禅 意 花 园 而 闻名 的 
Dave Shea 于 2004 年 提出 而 后 广泛 流行 的 技术 ,其 特点 是 将 多 个 具有 相关 性 的 图 片 集成 
于 一 个 图 片 文 件 中 ,通过 background-position 来 实现 显示 想 要 显示 的 部 分 ; 从 某 种 程度 
上 来 说 对 background-position 属性 的 灵活 应 用 是 CSS Sprite 的 精华 。 这 是 一 种 将 装饰 
性 的 图 片 合并 下 载 ,从 而 降低 服务 端 负载 的 技术 ,同时 对 这 些小 图 片 的 管理 更 优化 和 更 富 
有 效率 。 有 些 网 站 甚至 将 所 有 的 图 标 、 圆 角 图 片 和 其 他 装饰 性 的 小 图 全 都 集成 到 一 个 大 
图 片 中 ,然后 简单 地 使 用 background-position 来 选择 所 需要 显示 的 图 片 。 

(2) background-position 的 属性 值 依次 是 背景 图 片 的 左上 角 在 水 平和 垂直 两 个 方向 
相对 于 元 素 左上 角 的 偏 移 量 ,水 平方 向 向 右 和 垂直 方向 向 下 为 正 , 反 之 为 负 。 

实施 过 程 如 下 。 

(1) 查看 XHTML 代码 和 现 有 的 CSS ,浏览 效果 。 

(2) 查看 背景 素材 ch6\exp6-3\images\a_bg. png 图 片 文件 ,了解 到 : 文件 中 集成 了 
8 幅 小 图 片 ( 分 别 用 于 4 个 a 标记 两 个 状态 的 不 同 背 景 ), 每 幅 图 片 的 大 小 都 是 宽 246px 
高 50( 这 点 很 重要 ) 。 

(3) 给 a 标记 设置 背景 : 给 a 标记 添加 “background: url (images/li_ bg. png) 
no repeat 0 0; ”的 声明 。 

(4) 通过 修改 背景 图 片 的 位 置 来 设置 第 2 个 a 标记 的 背景 : 给 其 添加 “background- 
position: 0 一 50px;” 的 声明 ,其 中 的 一 50px 表示 将 背景 图 片 的 左上 角 相 对 于 a 元 素 的 左 
上 角 在 垂直 方向 往 上 偏 移 50px 的 距离 ,背景 图 片 的 来 源 和 背景 图 片 的 平 铺 方式 都 不 变 ， 
仅仅 是 背景 图 片 的 位 置 发 生 改 变 而 已 。 依 次 修改 背景 图 片 的 垂直 位 置 分 别 给 另外 两 个 a 
标记 设置 背景 ,相应 的 CSS 规则 如 图 6-7 所 示 。 


(5) 给 悬 停 状 态 的 a 标记 设置 背景 : 给 a:hover 标记 添加 “background: url(images/ 
a_bg. png) no-repeat 一 246px 0; “的 声明 ,其 中 的 一 246px 表示 将 背景 图 片 的 左上 角 相 
对 于 a 元 素 的 左上 角 在 水 平方 向 往 左 偏 移 246px 的 距离 。 依 次 修改 背景 图 片 的 垂直 位 置 
分 别 给 另外 3 个 a 标记 设置 悬 停 时 的 背景 ,相应 的 CSS 规则 如 图 6-8 所 示 。 


# content li# n2 a:hover( 
background-position: —246px —50px; 
) 
# content li# n3 af # content li# n3 a: hover( 
background-position: 0 — 100px; background-position: —246px —100px; 
$ ) 
# content li # n4 af # content li# n4 a:hover( 
background-position:0 —150px; background-position: —246px —150px; 
Ë ) 
图 6-7 设置 另外 两 个 a 标记 的 背景 图 6-8 设置 另外 3 个 a 标 记 悬 停 时 的 背景 


本 例 素材 已 经 将 a 标记 的 其 他 属性 设置 妥当 ,只 要 单纯 设置 背景 就 可 呈现 要 求 的 效 
果 ,否则 必须 依据 素材 图 片 的 尺寸 来 设置 元 素 的 尺寸 及 其 他 细节 ,这 是 一 个 比较 耗 时 的 细 
致 工作 ,特别 对 于 初学 者 。 

应 用 CSS 进行 网 页 布局 ,开发 符合 Web 标准 的 网 站 ,其 巴巴 son 
非常 重要 的 理念 就 是 实现 样式 和 内 容 的 分 离 ,也 是 最 基本 的 @ images 


实现 网 页 重 构 的 思维 ,因此 有 必要 将 样式 部 分 的 图 片 和 内 容 D Naai 本 
部 分 的 图 片 进行 合理 的 归 类 。 其 中 装饰 性 的 图 片 是 通过 T pege. css 


CSS 文件 中 元 素 的 background-image, background-repeat 和 
background-position 等 属性 引入 和 设置 的 ,所 以 网 站 的 文件 
结构 一 般 有 类 似 如 图 6-9 所 示 的 部 分 ,即将 CSS 文件 和 密切 
相关 的 装饰 性 图 片 所 在 的 文件 夹 images 归 在 一 起 。 

读者 可 以 按 这 样 的 文件 结构 整理 之 前 所 做 的 例题 ,其 要 点 是 : 将 嵌入 式 的 CSS 变 成 
链接 式 的 CSS, 然 后 新 建 相关 的 文件 夹 并 整理 文件 。 

实际 工作 中 的 网 页 设计 /制作 是 需要 多 种 技能 的 ,其 中 离 不 开 图 片 素材 的 准备 ,这 需 
要 有 比较 扎实 的 美工 和 图 像 设 计 及 处 理 功底 ,还 需要 其 他 的 专业 课程 来 铺垫 。 本 章 是 在 
已 有 背景 图 片 素材 的 基础 上 ,介绍 利用 CSS 引入 背景 图 片 的 主要 相关 属性 及 应 用 实例 ， 
通过 本 章 的 学 习 除 了 掌握 与 背景 设置 相关 的 技术 之 外 ,还 希望 读者 能 建立 起 区 分 内 容 图 
片 和 装饰 性 图 片 的 观念 ,同时 进一步 理解 W3C 所 倡导 的 内 容 与 样式 分 离 的 理念 。 


图 6-9 CSS 文件 和 装饰 性 
图 片 密切 相关 


选 择 题 


(1) 以 下 关于 背景 的 描述 中 错误 的 是 ( Jia 
A. 在 浏览 器 默认 的 样式 下 ,元 素 的 背景 颜色 是 透明 的 
B. 给 元 素 设置 一 个 背景 色 是 让 元 素 直 观 呈 现 所 在 区 域 的 快捷 方式 之 一 
C. 元 素 不 能 同时 拥有 背景 色 和 背景 图 片 
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D. 元 素 的 背景 覆盖 padding 所 在 的 区 域 
(2) 车 给 元 素 div. nav Bš Jill Y “background: # f00 url(nav_bg. jpg);” 的 样式 声明 ,以 
下 说 法 中 错误 的 是 ( Ys 
A. 只 要 空间 足够 ,背景 图 片 会 在 元 素 div. nav 的 水 平和 垂直 方面 平 铺 
B. 背景 图 片 的 左上 角 与 元 素 div. nav 的 左上 角 重 合 
C. 元 素 div. nav 会 显示 红色 的 背景 颜色 
D. 元 素 div. nav 不 会 显示 红色 的 背景 颜色 
(3) 如 有 诸如 “div. wrapper{ background-image:url(bg. jpg); background-position: 
left 30px; background-repeat: repeat-x; )” 的 CSS 规则 ,与 其 不 等 效 的 CSS 规则 是 ( y; 
A. div. wrapper{ background: url(bg. jpg) left 30px repeat-x; } 
B. div. wrapper{ background: url(bg. jpg) left ,30px repeat-x; } 


C. div. wrapper{ background: url(bg. jpg) repeat-x left 30px; } 

D. div. wrapper{ background: left 30px url(bg. jpg) repeat-x; } 
(4) 以 下 关于 网 页 中 图 片 的 说 法 ,错误 的 是 ( Js 

A. 网 页 文件 和 网 页 中 的 图 片 都 是 独立 存在 的 文件 

B. 网 页 中 的 图 片 可 以 通过 img 标记 引入 ,也 可 通过 CSS 引入 

C. 网 页 中 的 图 片 只 可 以 通过 img 标记 引入 

D. 利用 CSS 可 以 将 小 图 片 拼 成 大 图 片 


自主 训练 


练习 6-1: 基于 素材 ex6\ex6_1 文件 夹 ,参考 背景 图 片 的 尺寸 ,给 页 面 文件 ex6_ 
1. html 的 各 元 素 设置 合适 的 CSS 规则 ,使 页 面 实现 如 图 6-10 所 示 的 效果 ,也 可 对 照 素 材 
文件 夹 中 的 “ex6_1.JPG” 图 片 文件 。 操 作 要 点 如 下 。 

(1) id 为 banner -l 和 banner -r 的 div 分 别 设置 为 向 左 浮动 和 向 右 浮动 。 

(2) 用 素材 中 相应 的 背景 图 片 取代 h3 标题 中 的 文字 。 

G) 设置 div# main 元 素 内 所 含 三 栏 的 布局 。 

(4) 分 别 给 左 、 中 、 右 设置 相应 的 背景 图 片 和 背景 色 , 对 应 的 参考 背景 色 依次 为 
# 9edeff, # faffa9 HI # 959595; 文字 颜色 自行 设置 ,美观 协调 为 上 。 

(5) 页 脚 对 应 的 背景 色 和 文字 颜色 分 别 为 并 9cf 和 #03c。 

练习 6-1 配套 素材 中 ex6_1. html 文件 源 代码 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 

w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 

<html xmlns= "http://www. w3.org/1999/xhtml"> 

<head> 

<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 

<title> EIRFA f Et BJ E-8B — /vitle> 


<style type="text/css"> 
* {padding:0; margin :0; border:0; 
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USKE +m, TADRE mjii = #7ANA 
fa =s miamau, 被 联合 国教 科 - 正式 评审 为 世界 自 


当 岁 月 随 着 古老 的 日 出 日 落 而 流 走 ， 在 
这 里 ， 炊 烟 依然 安详 ， 羊 群 依旧 平 称 ， 
念佛 所 有 的 静 座 都 是 一 种 隐语 和 了 脑 示 , 
这 就 是 美丽 富 谈 的 黄河 大 草原 。 整 个 景 
区 时 现 出 一 片 壮丽 的 景象 ， 落 日 时 分 ， . 
登高 远 卡 ， 叭 有 这 里 才能 体会 到 “ 落 息 与 国家 级 保护 区 之 一 ， 是 | 
孤 熙 齐 飞 ， 秋 水 共 长 天 一 色 " 以 及 "长 河 川 省 命名 的 “科普 软 育 基地 "和 
SRB” 23408. 教育 基地 


包括 卧龙 、 四 姑娘 山 、 小 金 


图 6-10 参考 效果 图 


font-size:13px;} 
# content{ 
width:800px; 
margin:2px auto; 
i 
# banner imgí 
width:400px; 
height:120px; 
) 
# main{ 
margin-top:5px; 
margin-bottom:4px; 
$ 
div. con{ 
width:250px; 
$ 
# main img{ 
width: 230px; 
height: 150px; 
border:2px # fff solid; 
margin-left: 8px; 
) 
# main p( 
width: 230px; 


margin:8px auto 5px; 


| | XHTML+C55 网 页 设计 与 制作 实例 教程 ] 


text-indent:2em; 
line-height:1.3; 
) 
.clear{ 
clear: both; 
} 
</style> 
</head> 


<body> 
<div id= "content" > 
<div id= "banner" > 
<div id= "banner-l"><img src= "images/banner_l.jpg" alt=" W" /></div> 
<div id= "banner-r"><img src= "images/banner_r.jpg" alt 王 "地 形 " /></div> 
</div> 
<div class="clear" ></div> 
<div id= "main" > 
<div class= "con djz" > 
<h3> 33 </h3— 
<img src= "images/djz. gif" alt=" 大 九寨 ”" /> 
二 p 二 我国 目前 被 联合 国教 科 文 组 织 纳 入 《世界 自然 遗产 名 录 》 的 只 有 五 处 ,阿坝 州 就 
占 三 处 ,包括 九寨 沟 风 景 名 胜 区 和 黄龙 名 胜 区 以 及 四 川 大 熊猫 栖息 地 的 大 部 分 。 梁 绿 而 金黄 的 树 
也 nbsp; ,高 峻 而 多 姿 的 山 &nbsp;, &nbsp; 明 丽 而 浓艳 的 水 ,构成 九寨 沟 绝 世 之 美 。 湖 水 终年 碧蓝 
澄清 明丽 见 底 , 随 着 光照 变化 ,季节 推移 ,呈现 出 不 同 的 色彩 和 风韵 ,有 "黄山 归来 不 看 山 ,九寨 归 
来 不 看 水 "之 说 。 
</p> 
</div> 
<div class 一 "con dxm"> 
<h3> KAR < /h3— 
<img src= "images/dxm.gif" alt=" KJK" /> 
<p> WJI K fi š š L Hb + 2006 年 7 月 12 日 被 联合 国教 科 文 组 织 正式 评审 为 世界 自然 
遗产 地 ,包括 卧龙 .四 姑娘 山 , 小 金 与 宝 兴 交界 的 夹 金山 等 地 ,是 世界 上 野生 大 熊猫 数量 最 多 的 地 
区 ,其 中 卧龙 自然 保护 区 是 世界 上 最 大 的 大 熊猫 保护 区 , 它 位 于 汶川 县 西南 部 ,是 中 国 最 早 建立 的 
国家 级 保护 区 之 一 ,是 国家 和 四 川 省 命名 的 “科普 教育 基地 ”和 * 爱 国 主义 教育 基地 ”。 到 /p> 
</div> 
<div class="con dcy"> 
<h> KË t < /h3> 
<img src= "images/dcy. gif" alt=" & #£ JE" />> 
<p> LAKE AKE K, IT 2; BU 5k HK fi Bl 34 A z tE $Z uu ñJ aS Ë H Mb BU k. 42 H 
随 着 古老 的 日 出 日 落 而 流 走 , 在 这 里 ,炊烟 依然 安详 , 羊 群 依旧 平静 ,仿佛 所 有 的 静 议 都 是 一 种 隐 
语 和 暗示 ,这 就 是 美丽 富饶 的 黄河 大 草原 。 整 个 景区 呈现 出 一 片 壮丽 的 景象 ,落日 时 分 ,登高 远 姚 ， 
唯 有 这 里 才能 体会 到 “ 落 起 与 孤 心 齐 飞 ,秋水 共 长 天 一 色 ” 以 及 “长 河 落日 圆 ” 之 神韵 。 
</p> 
</div> 
<div class="clear" ></div> 
</div> 
<div class="clear" ></div> 
<div id= "bottom" > 
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<P> 开心 旅游 工作 室 MEUA <br/> Copyright © 2014 Happy-Travel Studio All 
Righis Reservo ip 
</div> 
</div> 
</body> 
</html> 


练习 6-2: 基于 素材 ex6\ex6_2 文件 夹 ,参考 背景 图 片 的 尺寸 ,给 页 面 文件 ex6 _ 
2. html 中 的 各 元 素 设置 合适 的 CSS 规则 ,使 其 实现 如 图 6-11 所 示 的 效果 。 


朱自清 
HRR, DRINE. iih (GER) GAER, AERD KRE, @irteBRIS. —J ik — eS, MTE. 
D E SA PRAF C 打气 炉 》 上， 和 炉子 都 重 得 乌黑 乌黑 ， 越 显 出 豆 议 的 白 。 这 是 晚上 ， 层 子 老 了 ， 虽 点 着 洋 灯 "， 也 
还 是 阴 | E REM BE PN A HPFS. 2008330513. WREG, MER, MEENA TREE 


FB 
+, REER, et kí Wy. 我 们 有 时 也 自 己 动 手 ， 但 炉子 实在 太 高 了， 总 还 是 坐 享 其 成 的 条 。 这 并 不 是 吃 刻 ， 只 是 玩 儿 。 父 
亲 说 晚上 冷 ， 路 aae Ea 水 豆腐 ; 一 上 点 就 眼 巴巴 望 着 那 锅 ， 等 着 那 执 气 , SA 
又 是 冬天 ， SIE SRE. SRSEPET: NE 3: |+, SERIO. PARRH: 我 们 要 游 西湖 ， 不 管 它 是 冬天 。 
BAQAR ; 上 本 来 前 一 歇 是 -月 当头 - ; 也 许 十 一 月 的 月 高 真有 些 特别 村 。 那 时 九 点 爷 了 MENTOR RICON 
点 风 ， 月 光照 着 软 软 的 水 波 ; AL, BARF MEUR 本 山下 储 尔 有 一 两 星 灯 火 。S 帮 口 占 丙 名 
th KERRRER PITAHE SAIRE. IMRE 


秋季 
朱自清 


说 起 冬天 ， 乱 然 想到 瑟 腐 。 是 一 小 洋 捅 -《 牛 损 》 白 者 豆腐 ， 热 腾 肪 的 。 水 深 若 ， 像 好 些 鱼 眼 铺 ， 一 小 块 一 小 块 豆腐 养 在 里 面 ， 同 而 滑 ， 
仿佛 反 穿 的 白狐 大 衣 。 损 在 洋 炉子 ~ 《煤油 下 打气 炉 2 L. year rra 让 这 是 晚上 ， 层 子 老 了 ， 虽 点 着 洋 灯 "， 也 
还 是 阴 瞎 。 围 着 点 子 坐 的 是 父亲 跟 我 们 哥 : 站 起 来 脸 ， 孝 着 眼 铺 ， 从 所 各 的 热气 里 伸 进 入 

F, REER, -wht RARE. SEE 实 T, 
gun 黎 上 冷 ， 吃 了 大 京 暖和 些 。 我 们 都 喜欢 这 种 白水 豆腐 ; E ESE, 等 着 那 热 
又 是 冬天 ， 记 得 是 阴历 十 一 月 十 六 晚上 。 跟 $ 君 P 必 在 次 湖 里 下 小 划 子 ，S 必 有 人 | 过 讨教 书 ， 事 先 来 
BAGEN : 人 本 来 前 一 晚 是 月 当头 ; 也 许 十 一 月 的 月 亮 真有 些 特别 轩 。 那 时 九 点 条 了 ， Pasa aria I 

点 风 ， 月 光照 着 软 软 的 水 波 ; SAL, BAAR MEUM TEREF. UPARA- SRA 
Ps: HETLNDH, ARETE ENTANS PASDER, HROREET. PRR ToT, dekie, amiet 


ARo MATETE AFE, ERREA, WORN STEFE, RETH MERECEN 
十 多 年 前 的 事 了 ，S 君 还 常常 通 着 信 ， 六 以 后 便 没 有 消息 。 在 台州 过 了 一 个 冬天 ， 一 家 
四 口子 。 台 州 是 个 山城 ， 可 以 说 在 一 个 大 公里。 只 有 一 条 过 时 长 的 大 街 。 另 的 } 台 上 白天 简直 不 大 见 大 ， 蜀 上 一 片 深思 。 偶 尔 人 家 窗户 时 流出 一 


点 灯光 ， 还 有 走路 的 人 着 的 火把 ， 但 那 息 少 要 了 。 我 们 住 在 山沟 下 。 有 的 旦 山上 校本 的 风声 ， 强 天 上 一 马 两 只 的 乌 影 。 bt gue 
走 ， 却 好 像 老 在 过 着 冬天 似 的 ; 可 是 即便 真 冬天 也 并 不 冷 。 我 们 住 在 档 上 ， 书 房 临 着 大 路 ， 路 上 有 人 说 话 ， 可 以 清 青 楚楚 地 听见 。 但 因为 走路 
BRET, 间或 有 点 说 话 的 声音 ， 听 起 来 还 只 当 远 风 送 来 的 ， 想 不 到 就 在 窗外 。 我 们 是 外 路 人 ， 除 上 学 校 去 之 外 ， a Etg 

那 祝 窜 ， 只 和 我 们 全 儿 们 守 着 外 边 虽 老 是 冬天 ， 家 里 却 老 是 春天 UCE CRANE ETHSNADORE, HHHti6 83 
ia 母子 二 个 ， 三 张 脸 都 带 着 天 真 微 疾 的 向 着 我 。 似 乎 台州 空空 的 ， 只 有 我 们 四 人 ; 天 地 空空 的 ， 也 只 有 我 们 四 人 。 pue iit WS ERS 
里 出 来 ， 满 自在 。 现 在 她 死 了 快 四 年 了 ， 我 却 还 老 记 着 她 那 微笑 的 影子 。 


图 6-11 参考 效果 图 
练习 6-2 配套 中 的 ex6_2. html 文件 源 代 码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 


<head> 
<title> IK 3 IB] E X /|v 9) E Et Ë H fE A A 88 E E ñj — E ÉE BE ñtJ Ë 38 E < /title> 
<style type="text/css"> 


* (margin:0; padding:0; color: # 000; 
} 
div. wrapper { 
width:760px; 
margin:3px auto ; 
background-color: # Ffc; 
background: url(images/wrapper_bg. gif) no-repeat left bottom; 
} 
div. wrapper h2{ 
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padding-left: 2em; 
color: # 00f; 
background: url(images/wrapper_bg. gif) no-repeat ; 
; 
div. wrapper h3 í 
text-align:right; 
margin-right:2em; 
color: # 36f; 
} 
div. wrapper p{ 
width:750px; 
margin:0 auto ; 
padding-bottom: 8px; 
font-size:12px; 
line-height:1. 2em; 
text-indent: 2em; 
š 
</style> 
</head> 
<body> 
<div class=" wrapper"> 
<h>KE</h2> 
<h3 >k BW </h3>— 
去 p> 说 起 冬天 ,忽然 想到 豆腐 。 是 一 “小 洋 锅 ”( 铝 锅 ) 白 者 豆腐 , 热 腾 腾 的 。 水 滚 着 , 像 好 
些 鱼 眼睛 ,一 小 块 一 小 块 豆腐 养 在 里 面 , 嫩 而 滑 , 仿 佛 反 穿 的 白狐 大 衣 。 锅 在 “ 洋 炉 子 ”( 煤 油 不 打气 
炉 ) 上 ,和 炉子 都 生得 乌黑 乌黑 , 越 显 出 豆腐 的 白 。 这 是 晚上 ,屋子 老 了 , 虽 点 着 “ 洋 灯 ”, 也 还 是 阴 
暗 。 围 着 桌子 坐 的 是 父亲 跟 我 们 哥 儿 三 个 。" 洋 炉子 " 太 高 了 ,父亲 得 常常 站 起 来 ,微微 地 仰 着 脸 ， 
具 着 眼睛 ,从 氨氮 的 热气 里 伸 进 筑 子 , 夹 起 豆腐 ,一 一 地 放 在 我 们 的 酱油 碟 里 。 我 们 有 时 也 自己 动 
手 ,但 炉子 实在 太 高 了 ,总 还 是 坐 享 其 成 的 多 。 这 并 不 是 吃饭 ,只 是 玩 儿 。 父亲 说 晚上 冷 , 吃 了 大 家 
暖和 些 。 我们 都 喜欢 这 种 白水 豆腐 ;一 上 桌 就 眼 巴巴 望 着 那 锅 ,等 着 那 热 气 ,等 着 热气 里 从 父亲 秩 
子 上 掉 下 来 的 豆腐 。 又 是 冬天 ,记得 是 阴历 十 一 月 十 六 晚上 。 W S 君 P 君 在 西湖 里 坐 小 划 子 ,S 君 
刚 到 杭州 教书 ,事先 来 信 说 :“ 我 们 要 游 西湖 ,不管 它 是 冬天 。" 那 晚 月 色 真 好 ;现在 想起 来 还 像 照 在 
身上 。 本 来 前 一 晚 是 “月 当头 ” ;也许 十 一 月 的 月 亮 真 有 些 特 别 墨 。 那 时 九 点 多 了 ,湖上 似乎 只 有 我 
们 一 只 划 子 。 有 点 风 , 月 光照 着 软 软 的 水 波 ; 当 间 那 一 溜 儿 反光 , 像 新 研 的 银子 。 湖上 的 山 只 剩 了 
淡淡 的 影子 。 山 下 偶尔 有 一 两 星 灯 火 。S 君 口 占 两 句 诗 道 :“ 数 星 灯火 认 渔 村 , 淡 墨 轻 描 远 仿 痕 。” 
我 们 都 不 大 说 话 , 只 有 均匀 的 桨 声 。 我 渐渐 地 快 睡 着 了 …*… 二 /p 二 
</div> 
<div class=" wrapper" > 
<h2>##:</h2> 
<h3># B i# </h3> 
去 p> 说 起 冬天 ,忽然 想到 豆腐 。 是 一 “小 洋 锅 ”( 铝 锅 ) 白 者 豆腐 , 热 腾 腾 的 。 水 滚 着 , 像 好 
些 鱼 眼睛 ,一 小 块 一 小 块 豆 腐 养 在 里 面 , 嫩 而 滑 , 仿 佛 反 穿 的 白狐 大 衣 。 锅 在 “ 洋 炉子 (煤油 不 打气 
炉 ) 上 ,和 炉子 都 一 得 乌黑 乌黑 , 越 显 出 豆腐 的 白 。 这 是 晚上 ,屋子 老 了 , 虽 点 着 “ 洋 灯 ”, 也 还 是 阴 
暗 。 围 着 桌子 坐 的 是 父亲 跟 我 们 哥 儿 三 个 。“ 洋 炉子 ” 太 高 了 ,父亲 得 常常 站 起 来 ,微微 地 仰 着 脸 ， 
和 帆 着 眼睛 ,从 和 握 氨 的 热气 里 伸 进 筷子 , 夹 起 豆腐 ,一 一 地 放 在 我 们 的 桨 油 碟 里 。 我 们 有 时 也 自己 动 
手 , 但 炉子 实在 太 高 了 ,总 还 是 坐 享 其 成 的 多 . 这 并 不 是 吃饭 ,只 是 玩 儿 。 父亲 说 晚上 冷 , 吃 了 大 家 
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暖和 些 。 我 们 都 喜欢 这 种 白水 豆腐 ;一 上 桌 就 眼 巴巴 望 着 那 锅 , 等 着 那 热 气 ,等 着 热气 里 从 父亲 筷 
子 上 掉 下 来 的 豆腐 。 又 是 冬天 ,记得 是 阴历 十 一 月 十 六 晚上 。 跟 S 君 P 君 在 西湖 里 坐 小 划 子 ,S 君 
刚 到 杭州 教书 ,事先 来 信 说 :“ 我 们 要 游 西湖 ,不管 它 是 冬天 。” 那 晚 月 色 真 好 ;现在 想起 来 还 像 照 在 
身上 。 本 来 前 一 晚 是 “月 当头 ;也许 十 一 月 的 月 亮 真有 些 特别 罢 。 那 时 九 点 多 了 ,湖上 似乎 只 有 我 
们 一 只 划 子 。 有 点 风 , 月 光照 着 软 软 的 水 波 ; 当 间 那 一 溜 儿 反光 , 像 新 研 的 银子 。 湖 上 的 山 只 剩 了 
淡淡 的 影子 。 山 下 偶尔 有 一 两 星 灯 火 。S 君 口 占 两 句 诗 道 :“ 数 星 灯 火 认 渔村 , 淡 墨 轻 描 远 焦 痕 。” 
我 们 都 不 大 说 话 , 只 有 均匀 的 桨 声 。 我 渐渐 地 快 睡 着 了 。P 君 “ 喂 ”了 一 下 , 才 抬 起 眼皮 ,看 见 他 在 
微笑 。 船 夫 问 要 不 要 上 净 寺 去 ,是 阿弥陀 佛 生日 , 那 边 蛮 热 闹 的 。 到 了 寺 里 ,区 上 灯 烛 辉煌 , 满 是 佛 
婆 念佛 的 声音 ,好 像 醒 了 一 场 梦 。 这 已 是 十 多 年 前 的 事 了 ,S 君 还 常常 通 着 信 ,P 君 听 说 转变 了 好 
几 次 ,前 年 是 在 一 个 特 税 局 里 收 特 税 了 ,以 后 便 没有 消息 。 在 台州 过 了 一 个 冬天 ,一 家 四 口子 。 台 
州 是 个 山城 ,可 以 说 在 一 个 大 谷 里 。 只 有 一 条 二 里 长 的 大 街 。 别 的 路 上 白天 简直 不 大 见 人 ,晚上 一 
片 漆黑 。 偶尔 人 家 窗户 里 透 出 一 点 灯光 ,还 有 走路 的 拿 着 的 火把 ,但 那 是 少 极 了 。 我 们 住 在 山脚 
下 。 有 的 是 山上 松林 里 的 风声 , 跟 天 上 一 只 两 只 的 鸟 影 。 夏 末 到 那里 , 春 初 便 走 , 却 好 像 老 在 过 着 
冬天 似 的 ;可 是 即便 真 冬天 也 并 不 冷 。 我们 住 在 楼 上 ,书房 临 着 大 路 ,路 上 有 人 说 话 ,可 以 清 清楚 楚 
地 听见 。 但 因为 走路 的 人 太 少 了 ,间或 有 点 说 话 的 声音 , 听 起 来 还 只 当 远 风 送 来 的 ,想不到 就 在 窗 
外 。 我 们 是 外 路 人 , 除 上 学 校 去 之 外 , 常 只 在 家 里 坐 着 。 妻 也 惯 了 那 寂 寞 ,只 和 我 们 爷 儿 们 守 着 。 外 
边 虽 老 是 冬天 ,家 里 却 老 是 春天 。 有 一 回 我 上 街 去 ,回来 的 时 候 ,楼 下 厨房 的 大 方 窗 开 着 ,并 排 地 挨 
着 她 们 母子 三 个 ,三 张 脸 都 带 着 天 真 微笑 地 向 着 我 。 似 乎 台州 空空 的 ,只 有 我 们 四 人 ;天 地 空空 的 ， 
也 只 有 我 们 四 人 。 那 时 是 民国 十 年 , 麦 刚 从 家 里 出 来 , 满 自在 。 现在 她 死 了 快 四 年 了 ,我 却 还 老 记 
着 她 那 微笑 的 影子 。 </p> 

</div> 
</body> 
</html> 


练习 6-3: 基于 素材 ex6\ex6_3 文件 夹 ,给 页 面 文件 ex6_3. html 中 的 4 个 栏目 
CH coll— # col4) 设 置 背 景 ,并 给 各 栏目 中 的 元 素 “ 二 a href = " # "之 更 多 <</a> ”设置 
背景 和 悬 停 时 的 背景 。 参 考 效 果 如 图 6-12 所 示 , 也 可 对 照 素 材 文 件 夹 中 的 ex6 _ 
3. JPG 和 ex6_3( 悬 停 ).JPG 图 片 文件 。 


Y SZERET P | 
ARERR, MERR, Kishii, KiE... -告诉 你 如 何 驾驭 自己 能 重 的 奇 书 | 
' 正 着 说 、 反 着 说 、 托 人 说 、 自 己 说 、 抢 着 说 … “如 果 能 认真 读 下 去 ， 你 会 被 很 多 贴心 的 故事 .| 
"营造 气氛 、 引 爆笑 点 、 埋 下 伏笔 、 热 话 冷 说 … -她 或 许 并 不 迷人 ， 但 于 我 们 的 人 生 而 言 ， 她 … 
“说 话 的 魅力 ， 沟 通 的 秘 符 -请 静 下 你 的 心灵 ， 随 着 这 本 书 开 始 一 场 自 我 … 
更 多 更 多 
“只 需 10 周 ， 成 功 掌握 自己 的 时 间 和 生活 “用 心 感受 一 片 云 的 静 美 ， 一 条 花 的 芳香 | 
“提高 自控 力 的 最 有 效 途 径 ， 在 于 弄 清 自己 如 .… “让 你 发 现 生活 中 原来 有 很 多 值得 欣赏 的 小 美 … | 
“ 想 放松 一 下 ， 却 数 夜 上 网 ; 一 直 想 减肥 ， 总 .… 让 你 在 积极 乐观 的 生活 态度 下 变 得 充实 而 美满 
-强大 的 意志 力 是 每 个 人 触手 可 及 的 - 愿 你 带 著 受 和 微笑 去 珍惜 那 些 出 现在 生命 中 ..， | 
更 多 sz | 


图 6-12 参考 效果 图 
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练习 6-3 配套 素材 中 ex6_3. html 文件 源 代 码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title2> 83] CSS Sprite HEY R</title> 
<style type="text/css"> 
*{ 
margin:0; 
padding:0; 
text-decoration: none; 
) 
. wrapper{ 
width:590px; 
margin:4px auto; 
) 
# coll, # col3 ( 
margin-left:0; 
) 
. book ( 
float:left; 
width:290px; 
height:180px; 
margin:0 0 10px 10px; 
) 
. book h3{ 
float:left; 
margin:12px 0 0 30px; 
) 
.book h3 a{ 
display : block; 
height:20px; 
font-size:14px; 
color: # 000; 
) 
.book h3 a:hover( 
color: # 03c; 
) 
.book p{ 
float:right; 
margin:12px 10px 0 0; 
} 
-book ul{ 
float:left; 
margin:10px 0 0 10px; 
) 
- book ul li{ 
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float:left; 
width:265px; 
line-height: 22px; 


white-space: nowrap; 
text-overflow: ellipsis; 
overflow:hidden; 
font-size: 13px; 

} 

- book ul li af 
color: #111; 

} 

.book ul li a:hover{ 
color: # 03c; 

} 

. book p. pmore ( 
float:right; 
margin-right:20px; 

} 

.book p. pmore a{ 
display:block; 
font-size: 11px; 
width:48px; 
height:21px; 
text-align:center; 
line-height: 22px; 
color: # 999; 

) 

.book p. pmore a:hover( 
color: # c00; 

) 

</style> 
</head> 


<body> 
<div class=" wrapper" > 
<div class= "book" id= "coll "> 
<h3><a href=" # ">E W $ JJ : X|3W 4388 #ë 82 < /a2-< /h3> 
<u> 
<li> -<a href=" # ">A, RERE, 大话 小 说 ,笑话 冷 说 , 重 话 狠 说 , 急 话 缓 说 ,长 
话 短 说 , 虚 话 实说 </a></li> 
<li><a href="#"> EF H KEH HAH ACH BEH WEH RRN tk 
ğ</a></li> 
<li>. <a href=" # "> REAA IRRA HETRE AESH Any 3 2 E 
HARA , x #J 9 E< ></i> 
<li> -<a href=" # "> i818 0988 , AE 0838 32 </a></li> 
</ul> 
<p class= "pmore">2>—<a href=" # ">E #</a>></p> 
</div> 
<div class= "book" i 


"col2"> 
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<h3> <a href=" # "> HH UER Y </a></h3> 
<ul> 
<li>. <a href 一 "#" 盖 告诉 你 如 何 驾驭 自己 能 量 的 奇 书 一 /a> 一 /li 
<li> -<a href 一 "上 #" 盖 如 果 能 认真 读 下 去 ,你 会 被 很 多 贴心 的 故事 所 启发 </a> 一 /1 
<li> -<a href 一 "上 井 "全 她 或 许 并 不 迷人 ,但 于 我 们 的 人 生 而 言 ,她 必定 有 用 二 /a> 王 /1 一 
<li2>.<a href="#"> 请 静 下 你 的 心灵 , 随 着 这 本 书 开 始 一 场 自我 修炼 的 旅程 吧 


</a></li> 
</ul> 
<p class= "pmore">>—a href=" # ">E 多 </a></p> 
</div> 


<div class="book" id="col3"> 
<h3><a href=" # "> B JJ </a></h3> 
<u> 
<li> .<a href=" # "> R 10 A, RH% H T ht AEA </a> </li> 
<li><a href=" # "> HA B F J HRA XORB , ET A P) nl K E ARE </a> 
</i> 
<li>. <a href=" # "> 8k — F , A RBE 1; — HARE, 总 是 挫败 ;那么 (自控 
力 》 就 是 专门 为 你 而 写 的 一 /a> 二 /> 
<li> .<a href="#" 志 强大 的 意志 力 是 每 个 人 触手 可 及 的 </a</li> 
</ul> 
<p class= "pmore”>—<a href=" # ">E 多 </a></p> 
</div> 
<div class= "book" id="col4"> 
<h3><a href=" # "— #E fir P k 3 tf BJ GE AR JE fe #t ñ) < /a >< /h3 > 
<ul> 
<li> .<a href=" # "> J.D 1822 — H ZWEK, — 2403 E</a></i> 
<li>. <a href=="#" 志 让 你 发 现 生活 中 原来 有 很 多 值得 欣赏 的 小 美好 ,小 快乐 </a 二 二 /li> 
<li><a href="#" 志 让 你 在 积极 乐观 的 生活 态度 下 变 得 充实 而 美满 </a 二 二 /li> 
<li> -<a href=" # "志愿 你 带 着 爱 和 微笑 去 珍惜 那些 出 现在 生命 中 的 小 美好 </a</li> 
</ul> 
<p class= "pmore”>><a href=" # ">E #</a></p> 
</div> 
</div> 
</body> 
</html> 


练习 6-4: 基于 素材 ex6\ex6_4 文件 夹 ,给 页 面 文件 ex6_4. html 设置 合适 的 CSS ,使 
其 实现 如 图 6-13 所 示 的 参考 效果 ,也 可 对 照 素 材 文 件 夹 中 的 ex6_4. JPG 图 片 文件 。 

要 点 提示 如 下 。 

(1) 结合 背景 图 的 尺寸 确定 div# show 的 宽度 。 

(2) 留意 段落 之 间 的 间隔 。 

练习 6-4 配套 素材 中 ex6_4. html 文件 源 代码 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 

w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 


šJ 
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| 解析 使 用 CSs 对 网 站 的 好 处 
添加 页 面 翻 开 速度 ， 削 三 跳出 车 
CSS 被 以 为 是 一 般 网 站 规划 和 开发 的 最 佳 做 法 ， 其 准 刚 也 为 SEO 带 来 间接 优点 。 
Google 曾 主张 将 文件 限制 在 100KB 以 下 ， 过 去 也 一 般 以 为 使 用 比较 小 的 页 面 更 有 优 
点 。 不 过 如 今 搜索 引擎 否认 代码 大 小 是 一 个 要 素 ， 除 非 太极 点 。 不 过 ， 坚 持 文件 比 
较 小 仍 是 意味 着 更 疾 速 的 调 入 时 刻 ， 比 较 低 的 跳出 襄 ， 被 完好 阅览 以 及 经 常 被 连接 
的 能 够 性 更 高 。 


ARADR, AREXE 

CSS 对 另 一 个 剧烈 评论 的 疑问 也 有 帮助 : 代码 和 文字 的 比例 。 一 些 SEO 专业 人 员 ， 
断 语 ， 比 较 低 的 代码 文字 比 《 较 少 代码 和 较 多 文字 ) 对 有 不 计 其 数 页 面 的 大 网 站 有 
明显 帮助 。 你 的 经 历 能 够 与 此 不 同 ， 可 是 CSS 使 全 部 变 得 更 简略 ， 没 有 理由 不 把 它 作 
为 规范 网 站 开发 进程 的 一 部 分 。 不 使 用 表格 ， 将 CSS 存 储 为 外 部 文件 ， 将 JavaScript 
也 存 为 外 部 文件 ， 将 内 容 层 和 体现 层 分 开 
from: http://code.google.com/p/wmxn/ 


图 6-13 参考 效果 图 


<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<<title> 测 试 背景 的 拼凑 ,特点 : 背景 是 上 中 下 三 部 分 拼凑 而 成 ,中 间 那 部 分 由 大 容器 来 确定 ,上 、 
下 两 部 分 由 容器 内 的 最 上 和 最 下 部 分 来 完成 二/title 二 
<style type= "text/css"> 
*{ 

padding:0; 

margin:0; 
] 
</style> 
</head> 
<body> 

<div id="show"> 

<h> ATIE CSS 对 网 站 的 好 处 二 /hl 

二 p 添 加 页 面 翻 开 速度 ,前 减 跳出 率 <</p 二 

<p>CSS 被 以 为 是 一 般 网 站 规划 和 开发 的 最 佳 做 法 , 其 准则 也 为 SEO 带 来 间接 优点 。 
Google 曾 主 张 将 文件 限制 在 100KB 以 下 ,过 去 也 一 般 以 为 使 用 比较 小 的 页 面 更 有 优点 。 不 过 如 今 
搜索 引擎 否认 代码 大 小 是 一 个 要 素 , 除 非 太 极点 。 不 过 ,坚持 文件 比较 小 仍 是 意味 着 更 疾 速 的 调 人 
时 刻 , 比 较 低 的 跳出 率 ,被 完好 阅览 以 及 经 常 被 连接 的 能 够 性 更 高 。 —/p> 

去 p> 削 减 页 面 代码 ,突出 文字 </p> 

<p>CSS 对 另 一 个 剧烈 评论 的 疑问 也 有 帮助 : 代码 和 文字 的 比例 。 一 些 SEO 专业 人 员 断 
H, 比较 低 的 代码 文字 比 ( 较 少 代码 和 较 多 文字 ) 对 有 不 计 其 数 页 面 的 大 网 站 有 明显 帮助 。 你 的 经 
历 能 够 与 此 不 同 ,可 是 CSS 使 全 部 变 得 更 简略 ,没有 理由 不 把 它 作为 规范 网 站 开发 进程 的 一 部 分 。 
不 使 用 表格 ,将 CSS 存储 为 外 部 文件 ,将 JavaScript 也 存 为 外 部 文件 ,将 内 容 层 和 体现 层 分 开 

</p> 

<h3>from: http://code. google. com/p/wmxn/</h3> 

</div> 
</body> 
</html> 


练习 6-5: 利用 CSS 给 图 片 加 图 框 ,实现 在 图 片上 悬 停 时 其 图 框 的 背景 和 边框 产生 
变化 。 本 练习 基于 素材 ex6\ex6_5 文件 夹 ,给 页 面 文件 ex6_5. html 设置 合适 的 CSS, 使 
其 实现 如 图 6-14 所 示 的 参考 效果 ,也 可 对 照 素材 文 件 夹 中 的 ex6_5.JPG 图 片 文件 。 
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要 点 提示 如 下 。 

(1) 效果 图 中 图 框 的 外 、 内 边 厚 度 为 1px, 外 边 是 虚线 dashed, 内 边 是 实 线 。 
(2) 内 、 外 边 之 间 的 距离 为 3px。 

(3) 正常 状态 时 边框 颜色 是 #f90, 背 景色 是 并 fc9 。 

(4) 鼠标 悬 停 时 边框 颜色 是 #090, 背 景色 是 并 ff。 


图 6-14 图 片 的 图 框 效果 图 
练习 6-5 配套 素材 中 ex6_5. html 文件 源 代 码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> 体 验 给 图 片 加 图 框 以 及 图 框 悬 停 时 背景 和 边框 发 生 的 变化 一 /title> 
<style type="text/css"> 
* {padding:0;margin:0; } 
# flower{ 
margin: 10px 0 0 100px; 
) 
</style> 
</head> 
<body> 
<p id= "flower" > 
<a href=" # "><img src= "yjx.jpg" alt= "#B$#" /></a> 
</p> 
</body> 
</html> 


练习 6-6; 站 点 文件 结构 的 优化 。 基 于 素材 ex6\ex6_6 文件 夹 ,参考 图 6-15(b) 所 示 
的 参考 效果 ,要 点 如 下 。 

(1) 将 页 面 中 的 内 容 图 片 (通过 过 img 之 标记 引入 的 图 片 ) 和 装饰 性 图 片 ( 通 过 CSS 
引入 的 图 片 ) 进 行 分 类 组 织 。 

(2) 将 页 面 文件 中 嵌入 式 的 CSS 转换 成 链接 式 CSS. 

(3) 整个 过 程 应 在 Dreamweaver 的 站 点 管理 环境 下 进行 。 


B ok_ex6_6 
Ë images 
F sx6_6.htnl 


-© exB_B E- style 

a- images à] myCss. css 
cO) exB_B. html Ë images 
(a) 优化 前 (b) 优化 后 


图 6-15 优化 前 后 的 文件 结构 
练习 6-6 配套 的 ex6_6. html 文件 源 代 码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 

<html xmlns= "http://www. w3.org/1999/xhtml"> 

<head> 

<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<<title> 体 验 文件 结构 的 优化 : 将 图 片 进 行 分 类 二 /title 二 

<style type="text/css"> 


* (padding:0; margin:0;border:0; 
font-size:13px; } 
# content{ 
width:800px; 
margin:2px auto; 
} 
# banner img{ 
width:400px; 
height:120px; 
) 
# banner-l{ 
float:left; 
) 
# banner-r{ 
float:right; 
) 
div.con h3{ 
width:100px; 
height:50px; 
text-indent: —1000px; 
) 
div. djz h3 ( 
background:url(images/h3_djz_bg. gif) no-repeat; 
) 
div.dcy h3{ 
background:url(images/h3_dcy_bg. gif) no-repeat; 
} 
div. dxm h3{ 
background: url(images/h3_dxm_bg. gif) no-repeat; 


} 


# main{ 


margin-top: 5px; 
margin-bottom: 4px; 

} 

div.con{ 

width:250px; 

} 

# main img{ 
width: 230px; 

height: 150px; 

border:2px # fff solid; 
margin-left: 8px; 


} 

#main p{ 
width:230px; 
margin:8px auto 5px; 
text-indent:2em; 
line-height:1.3; 

} 

div.djz { 
background: # 9edeff url(images/djz_bg. gif) repeat-x; 
color: #546602; 
float: left; 

} 

div.dcy { 
background: # faffa9 url(images/dcy_bg. gif) repeat-x; 
color: #013087; 
float: left; 
margin-left:25px; 

} 

div.dxm { 
background: # 959595 url(images/dxm_bg. gif) repeat-x; 
color: # fff; 
float:right; 

) 

.clear{ 
clear:both; 

) 

# bottom ( 
background: # 9cf; 
color: # 03c; 
padding:4px 0; 
text-align:center; 

) 


</style> 
</head> 
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<body> 
<div id= "content" > 
<div id= "banner" > 
<div id= "banner-l"><img src= "images/banner_l.jpg" alt 一 "风景 " /></div> 
<div id= "banner-r"><img src= "images/banner_r.jpg" alt==" 地 形 " /></div> 
</div> 
<div class="clear" ></div> 
<div id= "main" > 
<div class= "con djz" > 
<h3> KJju3s <X/h3> 
<img src= "images/ jz. gif" alt 二 "大 九寨 " /二 
<p > 我 国 目前 被 联合 国教 科 文 组 织 纳 和 世界 自然 遗产 名 录 》 的 只 有 五 处 ,阿坝 州 就 占 
三 处 ,包括 九寨 沟 风 景 名 胜 区 和 黄龙 名 胜 区 以 及 四 川 大 熊猫 栖息 地 的 大 部 分 。 梁 绿 而 金 
黄 的 树 &nbsp; ,高 峻 而 多 姿 的 山 &nbsp;, &nbsp; 明 丽 而 浓艳 的 水 ,构成 九寨 沟 绝 世 之 
美 。 湖 水 终年 苦 蓝 澄清 、 明 丽 见 底 , 随 着 光照 变化 ,季节 推移 ,呈现 出 不 同 的 色彩 和 风韵 ， 
有 “黄山 归来 不 看 山 ,九寨 归来 不 看 水 "之 说 。 
</p> 
</div> 
<div class="con dxm"> 
<h3> KAEI < /h3— 
<img src= "images/dxm.gif" alt=" KAJA" /> 
<p> WJI KARI W EF 2006 年 7 月 12 日 被 联合 国教 科 文 组 织 正式 评审 为 世界 自然 
遗产 地 ,包括 卧龙 .四 姑娘 山 , 小 金 与 宝 兴 交 界 的 夹 金山 等 地 ,是 世界 上 野生 大 熊猫 数量 
最 多 的 地 区 ,其 中 卧龙 自然 保护 区 是 世界 上 最 大 的 大 熊猫 保护 区 , 它 位 于 汶川 县 西南 
部 ,是 中 国 最 早 建立 的 国家 级 保护 区 之 一 ,是 国家 和 四 川 省 命名 的 “科普 教育 基地 ”和 
“爱国 主义 教育 基地 ”。 </p> 
</div> 
<div class 一 "con dcy"> 
<h3> KË Ji < /h3> 
<img src= "images/dcy. gif" alt=" K f J" /2> 
<p> RKE, HKK, T Zú BU 9k k ft Bi 3 A z tE £ uu BJ B 22 Ë Hi Mb BQ k. 42 H 
随 着 古老 的 日 出 日 落 而 流 走 , 在 这 里 ,炊烟 依然 安详 , 羊 群 依旧 平静 ,仿佛 所 有 的 静 说 
都 是 一 种 隐语 和 暗示 ,这 就 是 美丽 富 侥 的 黄河 大 草原 。 整 个 景区 呈现 出 一 片 壮丽 的 景 
象 ,落日 时 分 ,登高 远 晃 , 唯 有 这 里 才能 体会 到 * 落 起 与 孤 芍 齐 飞 ,秋水 共 长 天 一 色 ?以 
及 “长 河 落日 圆 "之 神 前 。 
</p> 
</div> 
<div class= "clear"></div> 
</div> 
<div class="clear" ></div> 
<div id="bottom"> 
<p> 开心 旅游 工作 室 版 权 所 有 到 br/> Copyright © 2014 Happy-Travel Studio All 
Rights Reserved. </p> 
</div> 
</div> 
</body> 
</html> 


列表 是 页 面 的 基本 元 素 ,根据 其 使 用 情形 分 有 序列 表 、 无 序列 表 和 定义 列表 三 种 。 
列表 元 素 不 仅 用 于 分 门 别 类 地 组 织 信 息 发 挥 其 最 基本 的 功能 ; 还 是 导航 和 菜单 的 基 
础 ,或 者 说 将 导航 和 菜单 作为 列表 元 素 并 添加 样式 是 一 种 最 佳 实践 ,其 好 处 是 当 使 用 
一 种 不 支持 CSS 的 用 户 代 理 ( 如 手机 ) 查 看 网 页 时 ,XHTML 的 列表 标记 至 少 可 以 将 导 
航 或 者 菜单 表现 为 一 组 简洁 嵌 套 的 链接 。 本 章 就 以 列表 元 素 为 核心 ,在 介绍 列表 样式 的 
基础 上 ,以 实例 的 方式 综合 盒子 模型 及 其 主要 参数 ,影响 布局 的 float display 和 position 
等 属性 ,字体 /文本 样式 和 背景 样式 等 所 学 知识 来 介绍 列表 元 素 在 网 页 设计 中 的 典型 
应 用 。 


7.1 剖析 列表 元 素 的 盒子 模型 


不 同 于 段落 和 标题 等 大 部 分 元 素 ,列表 元 素 是 一 个 复合 元 素 或 者 结构 化 元 素 , 即 列表 
类 元 素 由 两 个 元 素 构 成 ,一 是 上 级 列表 类 型 元 素 , 如 ulol, dl 分 别 为 无 序 有 序 和 定义 列 
表 , 二 是 列表 项 元 素 , 如 对 应 的 li、dt/dd。 

“一 切 元 素 皆 为 盒子 ”, 与 盒子 模型 相关 的 主要 参数 有 宽度 .内 边 距 .外 边 距 和 边框 。 
在 所 有 浏览 器 的 默认 样式 下 ,边框 样式 是 none. 所 以 边框 是 没有 显示 的 ; 背景 是 透明 的 ， 
所 以 元 素 的 盒子 模型 是 “隐形 ”的 。 要 让 元 素 显 现 盒子 特征 的 最 简单 方式 是 为 其 设置 背景 
或 者 边框 。 

对 于 结构 化 的 列表 元 素 其 所 在 的 盒子 有 什么 特点 ? 以 图 7-1 所 示 的 无 序列 表 元 素 为 
例 ( 素 材 是 ch7\7-1. html 一 7-7. html) ,这 里 探讨 在 浏览 器 的 默认 样式 下 ,列表 元 素 的 盒子 
特征 。 为 简洁 清晰 起 见 , 这 里 采用 给 元 素 设 置 边框 的 方式 ,为 了 便于 对 比 , 分 以 下 几 步 
进行 。 

(1) 给 ul 的 父 元 素 content 设置 边框 ,以 提供 一 个 参考 的 对 比 元 素 。 

(2) 给 ul 添加 边框 ,以 了 解 ul 元 素 的 盒子 模型 特点 。 

(3) 给 1 添加 边框 ,以 进一步 了 解 ul 元 素 的 盒子 模型 特点 和 1i 元 素 盒 子 模 型 的 
特点 。 

首先 给 ul 的 父 元 素 div 添加 “width:200px; border:1px # f00 solid;” 的 样式 声明 ， 
设置 宽度 和 显示 边框 ,如 图 7-2 所 示 。 


<div class= "content"> 

<ul> 
<i> 会 员 注册 </i> 
<i> 购物 流程 </i> 会 只 注册 

会 只 
<i> 订单 状态 </li> . pone 
" " = ìf: To 

<i> 常见 问题 册 </li> aA 
<li> 交易 条 款 册 二 /li> .交易 条 款 册 
<i> 会 员 协 议 册 </i> “ 会 员 协 议 册 

</ul> 

</div> 图 7-2 带 边 框 的 div 中 显示 
图 7-1 无 序列 表 的 XTHML 代码 一 个 刷 元 素 


其 次 ,给 div ul 添加 “border: 1px # 000 solid;” 的 声明 ,设置 列表 类 型 元 素 ul 的 边 
框 ,如 图 7-3 所 示 。 观 察 图 7-3 留意 两 点 : 一 是 ul 元 素 的 宽度 与 其 父 容 器 等 宽 , 呈 现 块 元 
素 的 特点 ,二 是 在 浏览 器 的 默认 样式 (本 书 使 用 的 浏览 器 是 IE 10.0 版 本 ) 下 ,ul 无 左 / 右 
外 边 距 , 但 有 上 /下 外 边 距 , 上 /下 外 边 距 大 约 是 16px( 测 试 方法 : 首先 在 Dreamweaver 的 
“设计 ”视图 利用 辅助 线 来 测 距 ,然后 给 ul 添加 “margin-top:16px; "样式 声明 后 再 刷新 页 
面 ,显示 并 没有 发 生变 化 )。 但 是 不 同 浏览 器 或 者 相同 浏览 器 的 不 同 版 本 其 ul 元 素 默 认 
的 上 /下 外 边 距 是 有 差异 的 ,所 以 通常 利用 之 前 的 实例 和 自主 训练 中 反复 提 及 的 
“x ( margin:0;)”CSS 规则 消除 这 种 因 浏 览 器 而 产生 的 差异 。 

最 后 ,给 div ul li 添加 “border:1px #f00 dashed;” 的 样式 声明 ,给 列表 项 元 素 li 设置 
一 个 虚线 边框 ,如 图 7-4 所 示 。 


-SAEN 
购物 流程 
， 订 单 状态 
“常见 问题 有 
交易 条 赤 
:会 员 协 议 册 


图 7-3 给 ud 元素 设置 边框 图 7-4 给 1i 元 素 设置 边框 


观察 图 7-4 发 现 一 个 现象 : 1i 元 素 并 没有 与 ul 元 素 左 对 齐 。 按 照 上 述 同 样 的 测试 方 
法 可 知 ,在 浏览 器 的 默认 样式 下 ,ul 包含 一 个 "padding-left:40px; ?的 声明 , 即 浏览 器 默认 
ul 元 素 的 左 内 边 距 是 40px。 图 7-5), K 7-5(b) 和 图 7-5(c) 分 别 是 给 ul 添加 “padding- 
left:20px;”、“padding-left:10px;” 和 “padding-left:0;” 声 明 的 浏览 效果 。 


] 
(a) ul 的 左 内 边 距 20px (b) ul 的 左 内 边 距 10px (©) ul 的 左 内 边 距 0 


图 7-5 对 比 给 叫 设 置 不 同 左 内 边 距 的 情形 
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观察 图 7-4 和 图 7-5 可 知 , 列 表 项 上 的 位 置 受 al 内 边 距 的 影响 ,但 是 1 相对 于 其 左 
侧 符号 的 位 置 并 不 受 ul 的 内 边 距 的 影响 。 在 很 多 情形 下 ,无 须 关 注 这 个 细节 ,但 是 车 
给 UU 设置 背景 ,这 个 细节 就 变 得 重要 了 ,因为 这 影响 列表 项 左 侧 的 项 目 符号 是 否 有 背 
景 的 效果 ,如 图 7-5(a) 中 列表 项 左 侧 的 项 目 符号 是 有 背景 效果 的 ,而 图 7-5(c) 的 项 目 
符号 是 没有 背景 效果 的 ,至 于 图 7-5(b) 的 项 目 符号 是 一 部 分 有 背景 效果 , 另 一 部 分 
没有 。 

注意 : 对 于 图 7-5(b) 和 图 7-5(c) 的 情形 , 若 ul 左 侧 没有 足够 的 空间 ,列表 项 符号 会 
给 “ 挤 掉 ”, 即 显示 不 完全 或 者 不 显示 。 

为 更 清晰 列表 元 素 li 盒子 模型 的 特征 ,对比 给 列表 项 元 素 1i 设置 外 边 距 和 内 边 距 的 
情形 ,图 7-6(b) 是 给 1i 设置 了 “margin-left:20px;” 声 明 的 效果 ,而 图 7-7(b) 是 给 li 设置 了 
“padding-left:20px;” 的 效果 。 


L 
(a) li 默认 无 外 边框 (b) 给 li 设置 了 20px 的 左 外 边框 (a) li 默认 无 内 边框 (b) 给 ii 设置 了 20px 的 左 外 边框 


图 7-6 给 贞 设 置 左 外 边 距 图 7-7 给 上 i 设置 左 内 边 距 


观察 图 7-7 可 知 , 列 表 项 fi 的 内 容 相对 于 其 左 侧 符 号 的 位 置 受 上 i 元 素 左 内 边 距 
的 影响 。 由 于 结构 化 中 的 每 个 元 素 都 可 以 单独 设置 样式 ,就 使 得 其 对 应 的 盒子 模型 显 
得 复杂 一 些 , 但 是 只 有 明白 这 些 细微 的 不 同 , 才 有 可 能 完全 控制 列表 元 素 的 显示 与 
布局 。 


7.2 列表 样式 


列表 元 素 所 特有 的 列表 样式 属性 都 是 针对 列表 项 左 侧 的 符号 /编号 的 ,如 用 于 控制 符 
号 /编号 的 类 型 .符号 /编号 的 位 置 以 及 将 符号 /编号 设置 为 指定 图 像 , 对 应 的 属性 分 别 是 
list-style-type, list-style-position 和 list-style-image。 

(1) list-style-type: 定义 列表 项 左边 符号 /编号 的 类 型 。 对 于 无 序列 表 ul 元素 ,属性 
list-style-type 的 主要 属性 值 有 : disc, circle, square 和 none, 默 认 值 是 disc; 对 于 有 序列 
K ol 元 素 , 属性 list-style-type 的 主要 属性 值 有 : decimal, lower-alpha、 upper-alpha、 
lower-roman、upper-roman 和 none, 默 认 值 是 decimal; 甚至 可 以 使 用 list-style-type 属性 
的 取 值 ,无 序列 表 和 无 序列 表 可 以 相互 转化 。 所 以 属性 list-style-type 在 某 种 程度 上 模糊 
T ul 和 ol 之 间 的 界限 ,但 是 使 用 ul 元素 和 ol 元 素 更 具 语 义 。 图 7-8(a) 一 图 7-8(d) 显 示 
了 给 ul 的 list-style-type 属性 设置 不 同属 性 值 的 显示 效果 。 


-2R 
(a) 默认 值 :disc 


(c) 属性 值 :square (d) 属性 值 :none 
图 7-8 ”对比 ul 的 list-style-type 不 同属 性 值 的 显示 效果 
(2) list-style-position: 定义 列表 项 左 侧 符号 /编号 的 位 置 .其 主要 属性 值 有 : outside 
和 inside, 默 认 值 是 outside, Ë] 7-9 对 比 了 这 两 个 属性 值 的 显示 效果 。 
(3) list-style-image: 用 于 将 列表 项 左边 的 符号 /编号 替换 成 图 像 。 例 如 , 若 要 用 图 
片 list_bg. jpg B f ul 列表 项 左边 的 符号 ,可 添加 “ul{list-style-image: url Cist _ bg. 
jpg);} ”的 CSS 规则 ,效果 如 图 7-10 所 示 。 


` PASE 


(a) 默认 值 :outside 


图 7-9 对比 ul B list-style-position 不 同 图 7-10 £ uli@ E T list-style- 
属性 值 的 显示 效果 image 属性 


(4) list-style; 复合 属性 。 在 一 条 声明 中 可 以 包含 上 述 多 个 单 属性 值 ,属性 值 之 间 用 
空格 隔 开 ,无 须 考虑 属性 值 之 间 的 顺序 。 

列表 样式 的 相关 属性 对 应 Adobe Dreamweaver 中 CSS 对 话 框 的 “列表 ”选项 卡 ,如 
图 7-11 所 示 。 

关于 列表 样式 说 明 以 下 几 点 。 

(1) 若 给 ul 添加 “{padding-left:0;)” 的 样式 声明 ,元素 ul 和 上 就 等 宽度 了 ,如 图 7-5(c) 
所 示 , 这 在 实际 中 经 常 使 用 。 

(2) 可 以 使 用 伪 类 li:first-child 选择 列表 项 中 的 第 一 个 列表 项 。 

(3) 属性 list-style-position 和 list-style-image 虽然 可 设置 列表 项 符号 /编号 的 位 置 
和 图 像 , 但 是 在 实际 使 用 中 有 比较 大 的 局 限 性 ,所 以 一 般 采 用 其 他 方式 变通 ,这 在 7.3 节 
的 实例 中 具体 体现 。 

(4) 以 上 介绍 的 列表 样式 属性 可 以 施加 于 列表 类 型 元 素 (ul 或 ol) 和 列表 项 元 素 li, 
但 是 要 清楚 其 作用 范围 的 差异 。 


列表 


List-style-type(D: | 


List-style-image T): 


List-style-Position (P) 


图 7-11 Dreamweaver 中 CSS 对 话 框 的 “列表 ”选项 卡 


7.3 列表 元 素 应 用 实例 


列表 元 素 作为 网 页 的 重要 组 成 元 素 ,其 在 网 页 中 的 表现 也 丰富 多 样 , 本 节 以 实例 的 方 
式 介绍 其 中 几 种 较为 典型 的 表现 效果 。 
例 7-1 列表 样式 的 简单 使 用 。 基 于 素材 ch7\ 《自控 力 ) 导读 


exp7_1. html。 为 其 添加 合适 的 CSS 规则 实现 如 ， smm, 成功 竺 所 自 己 的 时 间 和 生活 。 
， 提高 自控 力 的 最 有 效 途 径 ， 在 于 弄 清 自 己 如 何 失 控 ? 


图 7-12 所 示 的 效果 。 样 式 要 点 如 下 : + mn T. SAREA BARE, SERN, 
(1) ul 55 l 3632838. + 强大 的 意志 力 是 每 个 人 的 手 可 及 的 。 
+ ERD 放电 门 为 人 而 瑟 的。 
(2) 列表 符号 内 置 ,符号 类 型 是 square。 
(3) 给 1 元 素 设置 下 边框 。 Mus NTER 


(4) 利用 伪 类  first-child 给 列表 的 第 一 项 设置 上 边框 。 

(5) 利用 上 /下 内 边 距 设置 列表 项 之 间 的 间隔 。 

例 7-1 配套 素材 exp7_1. html 文件 源 代码 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 


w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 


<head> 

<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> 体 验 列表 样式 一 /title> 

</head> 

<style type="text/css"> 

. book{ 


width: 350px; 
margin: 2px auto; 
) 
- book ul{ 
font-size:13px; 
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</style> 
<body> 
<div class= "book" > 
二 h3 二 (自控 力 ) 导 读 <</h3 二 
<ul> 
<I> R 10 J8] ,成功 掌 握 自 己 的 时 间 和 生活 。 到 /1 
<I> RA ADHRA ZOER, TFW A EmA kE? </i> 
<li>8)kit— F. HD ER; — HARRE, GEE. </i> 
<IORKHEEHERAA FTIRA. </i> 
<li>< BJ 8 t] 9 8 5 09, </i> 
</ul> 
</body> 
</html> 


实施 过 程 如 下 。 

(1) 先 查看 XHTML 代码 结构 ,浏览 效果 。 

(2) ul 与 li 元 素 等 宽 : 给 ul 添加 “padding-left:0;” 的 声明 。 

(3) 列表 符号 内 置 , 符 号 类 型 是 square: 给 ul 添加 “list-style-type: square; list-style- 
position :inside; ”的 样式 声明 , 

(4) 给 li 元 素 设置 下 边框 : 给 ul li 添加 “border-bottom:1px solid #000;” 的 声明 。 

(5) 给 列表 的 第 一 项 设置 上 边框 : 添加 “ul li:first-child{border-top: 1px solid #000; )” 
的 CSS 规则 。 

(6) 设置 列表 项 之 间 的 间隔 : 利用 给 下 元 素 设置 上 /下 内 边 距 的 方式 加 大 1i 元素 之 
间 的 间隔 ,以 避免 采用 上 /下 外 边 距 的 方式 所 形成 的 空白 (在 有 背景 的 情形 下 需要 处 理 这 
种 情形 )。 给 ul li 添加 “padding:0. 3em 0; "的 声明 。 设 置 好 的 CSS 如 图 7-13 所 示 ,注意 
粗 体 部 分 文字 。 


<style type="text/css"> 
-book( 
width:350px; 
margin:2px auto; 
) 
- book ul{ 
padding-left: 0; 
list-style-type: square; 
list-style-position:inside; 
font-size: 13px; 
} 
- book ul li{ 
padding:0.3em 0; 
border-bottom: 1px solid # 000; 
} 
- book ul li:first-child{ 
border-top: lpx solid # 000; 
} 
</style> 


图 7-13 设置 好 的 CSS 


| < O y ( xHTML+CSS 网 页 设计 与 制作 实例 教程 | | 


例 7-2 利用 列表 项 制作 垂直 导航 栏 且 以 背景 的 方式 设置 
列表 符号 。 基 于 素材 中 的 ch7\exp7-2 文件 夹 ,通过 给 页 面 
exp7_2. html 设置 合适 的 CSS, 使 其 实现 如 图 7-14 所 示 效 果 。 
要 求 如 下 。 

O) 取消 ul 的 左 内 边 距 和 列表 项 符号 。 

(2) 扩大 a 元 素 的 单 击 区 域 , 并 将 图 片 images/dot. gif 作为 其 背景 ,有 下 边框 线 ( 厚 
度 为 1px, 颜 色 是 #333, 线 型 是 虚线 )。 

例 7-2 配套 素材 中 exp7_2. html 文件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> KJ) £ RHEE 8 SF US < /vitle> 
<style type="text/css"> 

body( 

font-size: 14px; 
) 
div. sider{ 
width:120px; 


E 7-14 B 7-2 浏览 效果 


i 

af 
text-decoration : none; 
color: # 333; 

) 

div. sider ul li( 
margin-top: 6px; 

) 

div. sider ul li a:hover{ 
color: # 03c; 
border-bottom: 1px solid # 03c; 

) 

</style> 
</head> 


<body> 
<div class= "sider"> 
<ul> 
<li class="11"> <a href=" # "之 配送 方式 </a></li 
<li class="12"><a href=" # "之 支付 方式 </a>></1i 
<li><a href=" # "> 售后 服务 一 /a> 一 /li 一 
</a> 
</div> 
</body> 
</html> 
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实施 过 程 如 下 。 

d) 取消 ul 的 左 内 边 距 和 列表 项 符号 : 给 ul 添加 “padding-left:0; list-style-type: 
none; ”的 样式 声明 。 

(2) 扩大 a 元 素 的 单 击 区 域 : 给 a 元素 添加 “display:block;” 的 声明 。 

(3) 给 a 元 素 设置 图 片 背景 : 查看 图 片 images/dot. gif 的 尺寸 大 小 是 宽度 为 22px、 
高 度 为 20px, 为 了 让 图 片 正 常 显示 ,a 元素 的 高 度 应 大 于 或 等 于 20px, 同 时 需要 将 文本 缩 
进 22px 以 上 的 距离 以 腾 出 图 片 显示 的 空间 ,所 以 给 a 添加 “height:20px; text-indent; 
25px; background: url(images/dot. gif) no-repeat;” 的 样式 声明 。 

(4) 调整 文本 在 垂直 方向 的 位 置 : 给 a 元 素 添加 “line-height:20px;” 的 声明 。 

(5) 给 a 元 素 添加 下 边线 并 调整 文本 与 下 边线 之 间 的 空间 ,给 a 元素 添加 “border- 
bottom:1px dashed #333; padding-bottom:3px;” 的 声明 。 添 加 的 CSS 如 图 7-15 所 示 。 


div. sider ul{ 
padding-left:0; 
list-style-type: none; 
) 
div. sider ul li af 
display: block; 
text-indent:25px; 
height:20px; 
padding-bottom:3px; 
line-height:20px; 
background: url(images/dot.gif) no-repeat; 
border-bottom: 1px dashed #333; 


图 7-15 设置 好 的 CSS 


注意 : 调整 文本 与 背景 图 片 的 相对 位 置 ,一 方面 可 以 利用 属性 line-height 来 调整 文本 
在 垂直 方向 的 位 置 , 另 一 方面 可 以 利用 background-position 属性 改变 背景 图 片 的 位 置 ,还 可 
以 通过 影响 盒子 模型 高 度 方向 尺寸 的 height 属性 和 上 /下 内 边 距 属性 等 多 种 方式 来 实现 。 

例 7-3 利用 列表 制作 水 平 菜单 栏 : 基于 素材 ch7\exp7_3. html 文件 ,为 其 添加 合适 
的 CSS 规则 实现 如 图 7-16 所 示 的 效果 。 


图 7-16 例 7-3 所 示 的 水 平 菜单 栏 


例 7-3 配套 素材 exp7_3. html 文件 源 代 码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> WRAAK zk F 38 8 < /vitle> 
<style type="text/css"> 
body{ 


| a O y | *ura.rssmmiusSan sms] — — 


font-size:13px; 

) 

a { 
text-decoration : none; 
color: # 000; 

) 

</style> 

</head> 


<body> 
<div class= "nav"> 
<u> 
<li class="11"> <a href=" # "之 配送 方式 一 /a> 
</li> 
<li class="12"><a href 一 " 井 " 之 支付 方式 </a> 
</li> 
<li><a href=" # "> ERZ </a> 
</li> 
<li><a href=" # "> £ K& F $4</a></li> 
</ul> 
</div> 
</body> 
</html> 


说 明 : 利用 列表 元 素 制 作 水 平 菜单 栏 是 实际 的 网 页 设计 中 经 常 要 用 到 的 CSS 技术 ， 
只 要 把 握 其 中 几 个 主要 声明 就 可 以 比较 容易 地 实现 ,至 于 背景 和 边框 等 效果 设计 就 看 实 
际 需要 了 。 为 了 进一步 加 深 对 列表 元 素 的 盒子 模型 和 float 属性 的 理解 ,本 例 将 比较 详细 
地 介绍 其 实现 过 程 。 

实现 过 程 如 下 。 

(1) 查看 源 代码 和 浏览 效果 。 

(2) 确认 各 元 素 的 盒子 模型 : 为 清晰 代码 中 div、ul\li 和 a 这 4 个 元 素 的 盒子 ,分 别 
给 它们 设置 不 同 颜色 的 边框 ,具体 的 CSS 规则 如 图 7-17 所 示 ,对 应 的 浏览 效果 如 图 7-18 
所 示 。 查 看 图 7-18 可 再 次 验证 在 浏览 器 的 默认 样式 下 ul 元 素 的 上 /下 外 边 距 和 左 内 边 
距 、 列 表 项 呈现 上 下 堆 盖 排列 ,行内 元 素 a 所 在 宽度 是 内 容 自 适应 ( 即 包 训 内容 ) 的 特点 。 


div. nav{ 
border:2px #000 dashed; 
} 
div. nav ul{ 
border:1px # f00 solid; 
) 
div. nav ul li{ 
border:1px #0f0 solid; 
} 
div. nav ul li af 
border:1px #00f solid; 
) 


图 7-17 加 边框 的 CSS 规则 图 7-18 带 边框 的 div、ul\li 和 a 元 素 
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(3) 取消 浏览 器 默认 的 内 /外 边 距 和 列表 项 左 侧 的 符号 : 添加 “x (margin: 0; 
padding:0; list-style-type: none; ) "的 CSS 规则 ,页 面 浏览 效果 如 图 7-19 所 示 。 

(4) 让 列表 项 呈 水 平 并 排放 置 : 给 li 元 素 添加 “float:left;” 的 声明 ,页 面 浏览 效果 如 
图 7-20 所 示 。 其 特点 是 li 元素 的 边框 * 包 于 ”a 元素 的 边框 (车 给 li 设置 一 个 右 外 边 距 会 
看 得 更 清楚 ) ,而 ul 和 div 仅 显示 不 包含 任何 内 容 的 边框 ,因为 它们 之 中 没有 包含 不 浮动 
的 元 素 了 。 


图 7-19 取消 内 /外 边 距 后 的 效果 图 7-20 列表 项 水 平 并 排放 置 


G) 让 ul 元 素 的 大 小 适应 li 的 大 小 : 给 ul 元素 添加 “float:left;” 的 声明 ,页 面 浏览 
效果 如 图 7-21 所 示 。 其 特点 是 ul 元 素 的 边框 * 包 庄 ?1i 元 素 的 边框 ,而 div 仍 显 示 不 包含 
任何 内 容 边框 ,因为 它 没 有 包含 不 浮动 的 元 素 。 

(6) 让 div 元 素 的 大 小 适应 ul 的 大 小 : 给 div 元 素 添加 “float: left; "的 声明 ,页面 浏 
览 效 果 如 图 7-22 所 示 。 其 特点 是 div 元 素 的 边框 “ 包 右 ”ul 元 素 的 边框 。 本 步骤 和 步骤 
(4) .步骤 (5) 都 验证 了 "浮动 元 素 会 紧 紧 地 包 庄 住 其 中 浮动 的 子 元 素 " 这 一 特点 。 
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图 7-21 ul 32 @ Rl TR 图 7-22 div 元素“ 包裹 ”ul 元 素 


(7) 扩大 a 元 素 的 单 击 区 域 : 给 a 元 素 添 加 *{ display:block; width:8em; padding; 
0. 2em 0; }” 的 样式 声明 ,页面 浏览 效果 如 图 7-23 所 示 。 其 中 将 a 元 素 转换 成 块 元 素 的 声 
HJ display: block 很 重要 。 
图 7-23 a 元 素 转换 成 块 并 扩大 其 单 击 区 域 
(8) 让 文本 在 块 内 居中 ,并 加 大 文字 之 间 间 隔 : 给 a 元素 添加 “1{ text-align: center; 
letter-spacing:0. 2em; }” 的 样式 声明 ,页面 浏览 效果 如 图 7-24 所 示 。 
图 7-24 文字 居中 对 齐 并 调整 文字 的 间隔 
(9) 取消 div、ul\li 和 a 元 素 的 边框 ,页 面 的 浏览 效果 如 图 7-25 所 示 。 
配送 方式 支付 方式 售后 服务 支持 及 下 载 
图 7-25 取消 所 有 元 素 的 边框 


(10) 给 a 元 素 及 其 悬 停 状态 设置 背景 和 文字 颜色 : 给 a 元 素 添加 “background: 
# ccc; color: #03f;” 的 样式 声明 ,给 a:hover 添加 “background: # f90; color: # fff; ” KFE 
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式 声明 ,页面 的 浏览 效果 如 图 7-26 所 示 。 
图 7-26 给 a 元 素 及 悬 停 状 态 设置 效果 


aD 给 列表 项 设置 一 个 右 外 边 距 加 强 效果 : 给 li 元 素 添加 “margin-right:3px;” 的 
样式 声明 ,页面 浏览 效果 图 7-27 所 示 。 


DRESS BELEE Ers “| | 支持 及 下 载 | 
图 7-27 例 7-3 设置 好 的 效果 
例 7-3 设置 好 的 CSS 规则 代码 (注意 粗 体 部 分 ) : 


<style type= "text/css"> 
body{ 
font-size: 13px; 

) 

a ( 
text-decoration:none; 
color: # 000; 

) 

* ( margin:0; 

padding: 0; 
list-style-type: none; 

) 

div. nav{ 
float:left; 

i 

div.nav ul( 
float:left; 

) 

div. nav ul li{ 
float:left; 
margin-right:3px; 

) 

div. nav ul li af 
display: block; 
width:8em; 
padding:0.2em 0 ; 
text-align:center; 
letter-spacing:0.2em; 
background: # ccc; 
color: # 03f; 

; 

div. nav ul li a:hover( 


background: # f90; 
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color: # fff; 
) 
</style> 


例 7-4 利用 列表 元 素 的 嵌 套 制作 水 平 下 拉 菜 单 : 基于 素材 中 的 ch7\exp7_4. html 
文件 ,为 其 添加 合适 的 CSS 规则 实现 如 图 7-28 所 示 的 效果 。 


银行 转账 


7-28 例 7-4 浏览 效果 
例 7-4 配套 素材 exp7_4. html 文件 源 代码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> 体 验 利 用 列表 的 骨 套 制作 水 平 下 拉 菜 单一 /title> 
<style type="text/css"> 
body( 
margin:4px 0 0 4px; 
font-size:13px; 
) 
al 
text-decoration: none; 


) 


*{ 
padding:0; 
margin:0; 
list-style-type: none; 


div. nav ul li{ 
margin-right: 3px; 
float: left; 


} 

div. nav ul li af 
display: block; 
width:8em; 
padding:0.2em; 
text-align:center; 


letter-spacing:0.3em; 


background: # ccc; 
color: # 03f; 

div. nav ul li a:hover{ 
background: # f90; 
color: # fff; 

) 
</style> 
</head> 


<body> 
<div class="nav" > 
<ul> 
<li class="11"> <a href=" # "> 8238 Jy £— /a> 
<ul> 
<li><a href=" # "> ET] B #ëJf+</a> </li> 
<li><a href=" # "> PFE Rš JJy+<< /a> </li> 
<li><a href=" # "之 特 快 专递 册 </a> </li> 
<li><a href=" # ">EMS 易 邮 宝 册 一 /a> </li> 
</ul> 
</li> 
<li class="12"><a href=" # "> 3£ffJrsš</a> 
<ul> 
<li><a href=" # "> 支付 宝 </a> </li> 
<li><a href=" # "> WRER</a> </li> 
<li><a href=" # "之 银行 转账 <</a> </li> 
<li><a href=" # "之 货 到 付款 一 /a> </li> 
</ul> 
</li> 
<li><a href=" # "之 售后 服务 一 /a> 
<ul> 
<li><a href=" # ">R/# AKR </a ></i> 
<li><a href=" # "> RERK</a> </li> 
</ul> 
</li> 
<li><a href=" # ">XH K F 34< /a></li> 
</ul> 
</div> 
</body> 
</html> 


说 明 : 本 例 的 XHTML 代码 是 例 7-3 代码 的 扩充 ,具体 是 在 一 级 菜单 对 应 的 列表 项 
中 嵌入 了 作为 下 拉 菜 单 的 无 序列 表 , 注 意 列表 嵌入 的 写法 是 二 li> <><> </i> 
的 结构 。 本 例 实现 的 关键 是 postion 属性 和 display 属性 的 应 用 ,这 两 个 属性 的 初次 体验 
已 在 第 4 章 的 相关 训练 中 体现 过 ,本 章 重 温 一 次 。 

实现 过 程 如 下 。 

(1) 查看 代码 并 浏览 效果 。 
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(2) 注释 用 于 下 拉 莱 单 的 列表 元 素 ul, 再 次 浏览 效果 ,发 现 就 是 例 7-3 的 效果 ,所 以 
水 平 下 拉 菜 单 的 制作 就 是 先 将 一 级 菜单 设置 好 ,然后 在 一 级 菜单 的 各 列表 项 中 嵌入 列表 
元 素 ,然后 再 开始 下 面 的 步骤 (注意 记得 取消 刚才 的 注释 )。 

(3) 隐藏 下 拉 菜 单 : 添加 div. nav ul li ul{display:none;}) 的 CSS 规则 ,浏览 效果 。 

(4) 设置 下 拉 列 表 ul 为 绝对 定位 ,同时 将 其 父 元 素 li 设置 为 相对 定位 ,产生 一 个 用 
于 其 子 元 素 ul 绝对 定位 的 环境 : 分 别 添加 div. nav ul li ul{position:absolute;) 的 CSS 规 
则 (这 是 用 作 下 拉 菜 单 的 子 元 素 ul) fll div. nav ul li {position: relative; } 的 CSS 规则 (这 是 
下 拉 菜 单 的 子 元 素 ul 的 父 元 素 DAY CSS 规则 ,注意 其 中 的 父子 关系 。 

(5) 当 鼠 标 悬 停 时 显示 下 拉 菜 单 : 添加 div. nav ul li; hover ul{display: block;} 的 
CSS 规则 ,页面 浏 览 效果 如 图 7-29 所 示 。 


银行 转账 


图 7-29 显示 下 拉 菜单 
(6) 设置 下 拉 菜 单 中 文字 的 对 齐 . 缩 进 和 文字 间距 : 给 div. nav ul li ul li a 添加 “text- 


align:left; text-indent; 0. 5em; letter-spacing:0. 2emj” 的 样式 声明 ,页 面 浏览 效果 如 
图 7-30 所 示 。 


银行 转帐 


图 7-30 调整 好 的 效果 
例 7-4 设置 好 的 CSS 规则 代码 (注意 粗 体 部 分 ) : 


<style type="text/css"> 
body{ 
margin:4px 0 0 4px; 
font-size: 13px; 
š 
alf 
text-decoration:none; 


} 


*{ 
padding:0; 
margin:0; 
list-style-type: none; 


) 
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div. nav ul li{ 
margin-right: 3px; 
float: left; 
position: relative; 

) 

div. nav ul li af 
display: block; 
width:8em; 
padding:0.2em 0; 
text-align:center; 


letter-spacing:0.3em; 
background: # ccc; 
color: # 03f; 

) 

div. nav ul li a:hover{ 
background: # f90; 
color: # fff; 


) 

div. nav ul li ul{ 
display : none; 
position : absolute; 


) 

div. nav ul li:hover ul{ 
display:block; 

) 

div. nav ul li ul li af 
text-align:left; 
text-indent:0. 5em; 
letter-spacing:0. 2em; 

) 

</style> 


读者 可 依照 以 上 思路 ,在 例 7-4 代码 的 基础 上 再 嵌入 列表 ,设置 相应 的 CSS 来 制作 一 
个 三 级 菜单 。 

本 章 在 对 列表 元 素 盒子 模型 详细 了 解 的 基础 上 介绍 了 列表 样式 及 其 典型 应 用 ,使 用 
列表 元 素 制作 垂直 导航 栏 和 水 平 菜 单 是 CSS 基于 列表 元 素 最 基本 的 实践 。 使 用 纯粹 的 
SS 创建 来 自 列表 项 的 导航 可 生成 更 实用 、 灵 活 和 对 搜索 引擎 更 好 的 显示 效果 ,可 被 使 
所 有 风格 和 种 类 设备 的 用 户 访问 。 


O 
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(1) 在 浏览 器 默认 的 样式 下 ,对 ul 元 素 所 对 应 的 盒子 模型 ,以 下 描述 错误 的 是 ( Js 
A. 有 上 下 外 边 距 B. 有 约 40px 的 左 内 边 距 
C. 其 宽度 与 所 在 父 容 器 等 宽 D. 以 上 说 法 都 不 对 

(2) 在 浏览 器 默认 的 样式 下 ,关于 ul 元 素 中 列表 符号 的 位 置 ,以 下 说 法 正确 的 是 ( Y's 
A. 与 ul 的 左边 框 有 40px 的 间距 B. 形状 是 实心 方 框 


C. 列表 符号 在 下 元 素 的 外 侧 D. 不 显示 
(3) 如 需 取消 ul 元 素 中 的 列表 符号 ,应 添加 的 CSS 规则 是 (  )。 
A. ul{list-style-position : inside; ) 
B. ul{list-style : none; } 
C. ul li; first-child{ list-style-type: none; } 
D. ul{padding-left:0;} 
(4) 如 需 列 表 项 水 平 并 排 显 示 , 且 被 ul 元 素 的 边框 包 庄 ,应 添加 的 CSS 规则 是 ( A 


A. ul,li{float:left;} B. li{float:left;} 
C. ul{float:left; } D. ul,li{float:none;} 
(5) 如 有 ”< 一 ul <li class= "good" >- </li></ul>” HARE , LAF IE WA h EFE 
是 ( 
A. ul li. class B. ul. class C. ul li. class D. ul. class 
(6) 如 需 给 ul 元 素 的 第 1 个 列表 项 单独 设置 样式 ,如 何 确定 其 定位 ,以 下 说 法 错误 的 
是 ( ) 。 


A. 可 利用 li:first-child 来 选择 第 一 个 列表 项 元 素 
B. 可 给 第 1 个 列表 项 添加 id 属性 来 标识 

C. 可 给 第 1 个 列表 项 添加 class 属性 来 标识 

D. 以 上 说 法 中 ,说 法 A 和 B 正确 ,说 法 C 错误 


自主 训练 


练习 7-1: 利用 列表 元 素 制作 垂直 导航 栏 。 基 于 素材 ex7\ex7-1 文件 夹 , 给 页 面 文件 
ex7_1. html 的 相关 元 素 设置 合适 的 CSS 规则 ,使 页 面 实现 如 图 7-31 所 示 的 效果 ,也 可 对 
照 素材 文件 夹 中 的 ex7_1. Jpg 图 片 文件 。 操 作 要 点 如 下 。 

A) 扩充 a 元 素 的 单 击 区 域 为 所 在 行 宽度 。 

(2) a 元 素 的 背景 .下 边线 和 文本 颜色 有 悬 停 效 果 。 


s 主页 s 主页 
= 产品 介绍 a 产品 介绍 
=s 支持 及 下 载 @ 支持 及 下 载 
a 如 何 购买 a 如 何 购买 
a 学 习 教程 a 学 习 教 程 
a 市 场 推广 活动 a 市 场 推广 活动 
a 链接 a 链接 
(a) 正常 状态 (b) 悬 停 状 态 


图 7-31 练习 7-1 效果 图 
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练习 7-1 配套 素材 中 ex7_1. html 文件 源 代 码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ /EN" 
"http://www. w3. org/TR/xhtml1/DTD/xhtmll-transitional. dtd"> 
<html xmlns= "http://www. w3. org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content="text/html; charset=gb2312" /> 
<title> 体 验 列表 项 制作 垂直 菜单 二 /title> 
<style type="text/css"> 
*{ 
margin:0; 
padding:0; 
list-style-type: none; 
font-size:13px; 
text-decoration : none; 
border:none; 


} 
body { 

background: # f3f3eb; 
) 


# content 
margin:4px auto; 
width:150px; 

) 

</style> 

</head> 


<body> 
<div id="content"> 
<ul > 
<li><a href=" # ">H </a> </li> 
<li><a href=" # ">F lh frf#d</a></li> 
<li><a href=" # "> £T & F #4</a></li> 
<li><a href=" # "> mmf g < /a>-—< /li> 
<li><a href="#" 过 学 习 教程 </a</li> 
<li><a href="#" 过 市 场 推广 活动 </a</li> 
<li><a href=" # ">#£#< /a></li> 
</ul> 
</div> 
</body> 
</html> 


练习 7-2: 利用 列表 元 素 制作 水 平 导航 栏 。 基 于 素材 ex7\ex7-2 文件 夹 ,给 页 面 文件 
ex7_2. html 的 相关 元 素 设 置 合适 的 CSS 规则 ,使 页 面 实现 如 图 7-32 所 示 的 效果 ,也 可 对 
照 素材 文件 夹 中 的 ex7_2. jpg 图 片 文件 。 
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图 7-32 练习 7-2 效果 图 


练习 7-2 配套 素材 中 ex7_2. html 文件 源 代 码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" /> 
<title> WRAKKE KFR /title> 
<style type="text/css"> 
*{ 
margin:0; 
padding:0; 
list-style-type: none; 
font-size: 13px; 
text-decoration: none; 


) 


# wrapper{ 
width:545px; 
margin:5px auto; 


) 


</style> 
</head> 


<body> 
<div id="wrapper"> 
<ul> 
<li><a href=" # "> EH </a> </li> 
<li><a href=" # "> p= fr #q</a></li> 
<li><a href=" # "> 4R F # < /a></li> 
<li><a href=" # ">W g 3 — /a>< /li> 
<li><a href=" # ">3£3J# #< /a></li> 
<li><a href=" # ">W </a ></i> 
<li ><a href=" # "之 链接 </a>></1i> 
</ul> 
</div> 
</body> 
</html> 


练习 7-3: 利用 列表 元 素 的 嵌 套 制作 二 级 菜单 。 基 于 素材 ex7\ex7-3 文件 夹 ,给 页 面 


文件 ex7_3. html 的 相关 元 素 设置 合适 的 CSS 规则 ,使 页 面 实现 如 图 7-33 所 示 的 效果 ,也 
可 对 照 素 材 文件 夹 中 的 ex7_3. jpg 图 片 文件 。 


> 配送 方式 8 上 门 自 提 册 G) 配送 方式 > 配送 方式 
加 支付 方式 日 款 准 快递 册 四 支付 方式 @ 支 付 宝 > 支付 方式 
Q 售后 服务 @ 特 快 专 甫 册 ®© 售后 服务 @ 网 银 在 线 © 售后 服务 @ 退 舍 ， 换 告 政 策 


© EMS 易 部 宝玉 9 银行 转账 保修 条 款 
宅急送 册 9 货 到 付款 


图 7-33 练习 7-3 效果 图 


练习 7-3 配套 素材 中 ex7_3. html 文件 源 代 码 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd"> 

<html xmlns= "http://www. w3.org/1999/xhtml"> 

<head> 

<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 

<title> HRA H) #& 18 l fE — 3 < /uitle2> 


<style type="text/css"> 


ul{ 
padding-left:0; 
list-style-type: none; 
) 
af 
text-decoration: none; 
color: # 333; 
} 
a:hover( 
text-decoration: underline; 
color: # {00; 
) 
</style> 
</head> 


<body> 
<div class= "sider" > 
<a> 
<li class="11"> <a href=" # "之 配送 方式 一 /a> 
<u> 
<li><a href=" # "> ET] B #JJfy</a> </li> 
<li><a href=" # "之 标准 快递 册 王 /a>> </li> 
<li><a href=" # ">t ë JJfF<C /a> </li> 
<li><a href=" # ">EMS BB s£ Jf+< /a> </li> 


<li><a href=" # ">£ #j&JJf</a> </li> 
</ul> 
</li> 
<li class="12"><a href=" # "> 支付 方式 一 /a> 
<ul> 
<li><a href=" # "> 4ft E</a> </li> 


<li><a href=" # "> WRER</a> </li> 


<li><a href=" # "之 银行 转账 <</a> </li> 
<li><a href=" # "之 货 到 付款 天 /a> </li> 
</ul> 
</li> 
<li><a href=" # ">F ARZ </a> 
<u> 


<li><a href=" # "二 退货 、 换 货 政策 </a</li> 
<li><a href="#" 过 保修 条 款 </a> </li> 


</ul> 
</div> 

</body> 

</html> 

练习 7-4; 综合 练习 XHTML 代码 的 编写 和 CSS 的 设置 。 基 于 素材 ex7\ex7-4 文件 
夹 中 的 文字 素材 和 图 片 素材 ,参照 图 7-34 的 效果 或 者 素材 文件 夹 中 的 ex7_3. Jpg 图 片 ， 
编写 页 面 的 XHTML 代码 ,并 设置 合适 的 CSS 代码 。 要 点 如 下 。 

(1)“ 读 ”图 : 确定 页 面 总 体 结构 , 即 几 行 几 列 的 布局 。 

(2) 编写 富有 语义 结构 良好 的 XHTML 代码 。 

(3) 细 化 每 个 结构 的 内 部 元 素 。 

(4) 编写 CSS 样式 。 

D 实现 整个 页 面 的 初始 化 的 CSS. 

@ 实现 布局 的 CSS。 

@ 综合 素材 和 效果 图 编写 各 个 元 素 的 CSS。 

D 给 各 个 a 元 素 编写 实现 悬 停 效 果 的 CSS, 

(5) 优化 站 点 文件 结构 。 

Q 采用 链接 式 的 CSS. 

@ 实现 内 容 图 片 和 作为 背景 的 装饰 性 图 片 的 分 类 管理 。 
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图 7-34 参考 效果 图 


一 般 软 件 都 提供 模板 和 库 项 目的 功能 ,只 是 体现 和 有 具体 的 实现 不 同 , 模 板 是 文件 级 
的 ,而 库 项 目 是 元 件 级 的 (在 网 页 设计 中 可 将 库 项 目 理解 为 自 定义 的 元 素 , 而 其 他 应 用 软 
件 根据 行业 习惯 可 称 之 为 元 件 、 零 件 或 者 库 等 ) ,其 本 质 都 是 为 了 提高 设计 效率 、 保 持 设计 
风格 的 一 致 .强化 设计 效果 的 整体 感 等 。 网 页 制作 专业 软件 Dreamweaver 所 提供 的 网 页 
模板 和 库 项 目的 创建 与 使 用 功能 ,在 实际 中 是 经 常用 到 的 ,本 章 将 基于 Dreamweaver CS5 
采用 实例 的 方式 介绍 与 模板 和 库 项 目的 创建 与 使 用 相关 的 知识 和 要 点 。 


8.1 网 页 模板 的 创建 与 编辑 


在 Dreamweaver 环境 中 ,任何 一 个 网 页 都 是 基于 一 个 网 页 模板 创建 的 , 刚 开 始 时 是 
基于 一 个 空白 页 的 模板 ,如 图 8-1 所 示 。 


aë 


KnL 模板 
XSLT (SI) 
XSLT (片断 ) 
库 项 目 
ActionScript 
css 
JavaScript 
m 


页 面 
O 
D 
D 
fed 
- 
- 
多 


ASP JavaScript 
ASP VBScript 
ASP. NET C# 

F) ASP.NET VB 

T) ColdFusion 


HTML 4.01 Transitional v 
A AEE 3 
°. 


Ë. tuai 


ECE 


图 8-1 基于 “空白 页 ”模板 创建 页 面 


在 实际 的 网 站 设计 与 制作 中 ,为 体现 网 站 的 整体 感 , 保 持 设计 风格 的 一 致 和 提高 设计 
与 开发 效率 ,需要 创建 自己 的 模板 ,然后 基于 模板 来 创建 其 他 页 面 。 如 图 8-2 和 图 8-3 所 
示 的 两 个 页 面 ,其 整体 风格 是 一 样 的 .页 眉 / 页 脚 和 左 侧 的 导航 栏 也 都 完全 相同 ,依据 导航 
栏 ,这 样 的 页 面 是 11 个 ,页 面 之 间 唯 一 的 不 同 只 是 中 间 部 分 的 右 侧 内 容 栏 ,在 这 种 情形 


[ 第 6 章 网 页 模板 和 库 的 创建 及 必用 ] 


下 ,创建 模板 是 很 自然 的 需要 。 


Sy 顺德 职业 技术 学 院 


Shunde Polytechnic 


电子 与 信息 工程 系 (简称 电子 与 信息 工程 学 院 ) 由 原 电子 工程 系 和 原 计算 机 技术 系 于 2010 年 9 月 合 
并 组 建 ， 是 中 央 财 政 支持 建设 的 职业 教育 实 吕 大 基地 的 计算 机 应 用 与 软件 技术 实 训 基地 "建设 单位 ， 广 东 
省 示范 性 软件 学 院 建设 单位 。 

电子 与 信息 工程 学 院 现 有 教 职 工 86 人 。 其 中 教师 中 教 摄 2 人 ， 副 高 职称 21 人 ， 占 37.1% ; 中 级 了 
人 ， 占 64.5% ; 博士 5 人 ， 硕 士 46 人 ， 占 85.5%。 全 系 在 校 全 日 制 学 生 2126 人 ， 平 均 就 业 率 在 99%| 

电子 与 信息 工程 学 院 共 有 智能 家 电 与 电子 、 电 气 自动 化 技术 、 通 信 技 术 、 计 算 机 网 络 与 基础 
机 应 用 与 软件 等 5 个 教研室。 拥有 电子 信息 工程 技术 〈 智 蓄 家 电 ) 、 电 气 自动 化 技术 、 通 信和 技术、 应 用 电 
子 技术 、 计 算 机 网 络 技术 ， 计 算 机 应 用 技术 、 软 件 技术 等 7 个 专业 。 电 子 信息 工程 技术 (智能 家 电 ) 专业 
是 国家 骨干 院 校 重点 建设 专业 和 省 级 示范 专业 。 计 算 机 网 络 技术 、 电 气 自动 化 技术 、 应 用 电子 、 通 信 技 
术 、 计 算 机 应 用 技术 和 软件 技术 专业 为 院 恕 重点 专业 。 拥 有 27 个 实 训 室 : 同 络 管理 、 网 站 开发 与 数据 
库 、 软 件 工具 与 环境 、 计 算 机 组 装 、 同 络 构建 与 融合 通信 、LINUX， 网 络 综合 布线 、 多 音 体 、 计 算 机 软 
件 开发 与 系统 运 维 、 农 电 产 品 控制 技术 、 电 子 产品 制造 车 间 、 电 工 、 电 子 实验 、 电 工 电子 、 电 子 、 电 工 
技能 《1》、 电 工 技能 〈 幼 、 技 术 创 新 、 传 感 器 、PLC 技 术 、 家 电 、 通 信 技 术 固 网 综合 、 通 信 技 术 、 智 
能 电 控 器 模拟 、 说 入 式 技术 、 家 用 电器 检 珊 维修 与 考证 、 电 子 电源 与 LED 技 术 、 电 力 电子 与 电机 调 束 
等 。 网 时 ， 电 子 与 信息 工程 系 与 美的 、 海 信 、 顺 达 电脑 、 东 芍 、 高 也 、 科 威 、 瑞 图 万 方 、 动 易 网 络 、 顺 
生 电 信 、 顺 德 移动 等 企业 合作 建立 了 数 十 个 校外 实 训 基地 。 

到 目前 为 止 ， 电 子 与 信息 工程 学 院 已 詹 国 家 级 精品 课程 3 门 ， 省 级 精品 课程 8 门 ， 已 负责 完成 国家 自 
然 科学 基金 项 目 1 项 ， 省 级 教研 项 目 6 项 ; 在 研 国家 自然 科学 基金 项 目 1 项， 省 自然 科学 基金 项 目 1 项 。 在 
aaa 电子 与 信息 工程 学 院 多 次 在 全 国 ， 省 和 学 院 各 级 专业 技能 比赛 和 大 学 生 挑战 杯 算 比 


=£ 


se 厦 他 职业 技术 学 院 ， 


Shunde Polytechnic 


图 8-2 页 面 1 


下 属 二 级 院 、 部 


电子 与 信息 工程 学 院 


空调 技术 《 即 制冷 与 准 巷 技术 ) 、 汽 车 检测 与 维修 技术 、 机 电 一 体 化 技 
计 与 制造 五 个 专业 ， 教 职工 66 人 ， 其 中 教授 7 人 ， 副 高 职称 14 人 ， 讲 师 14 人 ， 工 
程 师 12 人 ， 高 级 技师 17 人 ， 技 师 22。 士 5 人 ， 硕 士 23 人 。 已 建立 了 制冷 、 汽 车 、 刹 控 与 昼 具 、 现 代 
制造 技术 等 37 个 实 训 室 ， 拥 有 价值 万 元 的 先进 教学 仪器 和 设备 ， 英 足 了 各 专业 技能 训练 及 对 外 服 
务 涡 要 。 各 专业 与 企业 索 密 联系 ， 建 立 了 海信 科 龙 、 美 的 、 格 兰 仕 、 怕 列 ， 科 达 机 电 、 新 的 模具 ， 广 东 
争 压 机 床 厂 等 30 多 个 校外 实 训 基 地 。 

制冷 与 空调 技术 专业 是 全 国 首 批 高 职高 专 教学 改革 试点 专业 及 国家 重点 培 商 高 职 院 校 重 点 建设 专 
业 ，2010 年 ， 制 冷 与 冷藏 技 术 专业 与 机 电 一 体 化 技术 、 数 控 技 术 、 模 具 设 计 与 制造 专业 组 成 专业 群 ， 成 
为 国家 骨干 院 校 建设 项 目 ， 并 于 2013 年 4 月 顺利 函 过 验收 。 制 冷 与 冷 苞 技 术 、 汽 车 检 测 与 维修 技术 和 数 
控 技 术 专 北 为 省 级 示范 性 专业 ， 机 电 一 体 化 技术 专业 为 广东 省 重点 建设 圭 半 ， 制 冷 与 空调 技术 专业 和 数 
控 技 术 专业 分 别 成 为 国家 、 广 东 省 职 教师 资 培训 基地 ， 制 冷 与 空调 技术 专业 建成 -广东 省 高 校 热泵 工程 中 
心 获 教 育 厅 立 项 建设 ， 还 与 省 岳 量 监督 局 合作 共 建 了 广东 省 空调 产品 质量 监督 检验 站 〈 顺 德 站 ) 。 

机 电工 程 学 院 共有 四 门 国家 级 精品 课 、 六 门 省 级 精品 课 ， 省 级 教学 名 师 两 人 。 专 半 教 师 主持 国家 、 
省 级 自然 科学 基金 各 一 项 ， 其 它 省 雏 科 研 项 目 3 项 ， 获 市 厅 驾 科技 进步 奖 三 项 ， 省 级 教学 成 果 一 等 奖 三 
项 ， 猴 授权 专利 40 湖 项 。 近 年末 我 系 学 生 在 全 国 各 类 技能 大 赛 中 获 国 家 级 技能 大 赛 一 等 奖 30 人 项、 二 等 
奖 20 余 项 ， 省 级 技能 大 赛 奖 项 60 余 项 。 

机 电工 程 学 院 各 专业 紧 跟 地 方 产 业 技 术 发 展 霍 要 ， 大 力 推行 教学 改革 ， 强 化 培养 字 生 动手 能 力 ， 毕 
业 生 本 到 用 人 单位 好 评 ， 就 业主 连年 保持 在 98 % D F. 
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811 网 页 模板 的 创建 


一 般 是 基于 现 有 的 网 页 创建 模板 。 在 用 于 创建 模板 的 网 页 准备 就 绪 后 ,选择 “文件 ”一 
“另存 为 模板 ”命令 ,弹出 如 图 8-4 所 示 的 “另存 模板 ”对 话 框 。 

在 “另存 模板 ?对话 框 中 的 “另存 为 "文本 框 中 输入 模板 文件 名 (如 intro_depart) , 按 需 
要 输入 相关 的 描述 , 单 击 “ 保 存 ” 按 钮 ; 在 随后 弹出 的 “要 更 新 链接 吗 ” 提 示 信 息 对 话 框 中 
单 击 “ 是 ”按钮 ,以 确认 链接 的 更 新 ,在 网 页 所 在 站 点 根 目录 ,Dreamweaver 环境 会 自动 创 
建 一 个 名 为 Templates( 模 板 ) 的 文件 夹 用 于 存放 模板 文件 ,如 图 8-5 所 示 。 网 页 模板 文件 
的 扩展 名 是 . dwt(Dreamweaver Template 的 缩 略 ) ,至 此 完成 网 页 模板 文件 的 创建 。 


gmg———— 
GBR) 


D 站 点 - 模板 (Ci\Users\Ad 
D- images 


另存 为 :intro_depart | E @ Tenplates 
Å T intro_depart. dwt 
图 8-4 “另存 模板 "对 话 框 图 8-5 环境 自动 创建 一 个 名 为 
Templates 的 文件 夹 


812 网 页 模板 的 编辑 


模板 创建 完成 后 ,系统 默认 所 有 的 区 域 在 新 的 页 面 中 都 是 不 可 编辑 的 , 即 不 可 以 对 基 
于 这 样 的 网 页 模板 创建 的 网 页 做 任何 修改 ,这 样 的 模板 是 没有 任何 价值 的 。 利 用 模板 最 
基本 的 目的 是 对 页 面 中 固定 不 变 的 区 域 ( 姑 且 称 之 为 静态 部 分 ?进行 固化 ,以 保持 网 站 风 
格 的 统一 ,提高 网 站 设计 和 制作 的 效率 ,而 其 他 的 区 域 是 可 以 按 需 来 更 新 的 (动态 部 分 )， 
以 满足 实际 的 需要 。 这 些 可 编辑 的 动态 部 分 在 Dreamweaver 环境 中 体现 为 可 编辑 区 域 、 
可 选区 域 ` 可 编辑 的 可 选区 域 和 令 属 性 可 编辑 等 形式 ,以 下 逐一 介绍 。 


1. 定义 可 编辑 区 域 、 可 选区 域 和 可 编辑 的 可 选区 域 
在 网 页 模板 文档 中 ,选择 “插入 ”一 “模板 对 象 ” 命 令 ,产生 如 图 8-6 所 示 的 二 级 菜单 。 


图 8-6 选择 “插入 ”~ 模板 对 象 "命令 后 产生 的 二 级 菜单 


(1) 可 编辑 区 域 : 将 选中 的 区 域 ( 即 XHTML 元 素 ) 定 义 为 基于 模板 生成 的 页 面 中 可 
以 修改 的 区 域 。 该 区 域 可 以 是 任何 XHTML 元 素 , 如 div, 标 题 和 图 片 等 。 例 如 ,将 模板 
中 元 素 “ 一 h3 二 一 a href 一 "#" 盖 园林 旅游 二 /a 之 一/h3 之 ”定义 成 可 编辑 区 域 ,只 要 选中 
该 元 素 ,然后 选择 “插入 ”一 “模板 对 象 >“ 可 编辑 区 域 ”命令 ,该 操作 完成 后 ,环境 就 自动 
在 h3 元 素 的 前 后 添加 如 图 8-7 所 示 代 码 的 注释 代码 (斜体 部 分 标识 ) ,表明 h3 元 素 在 基 
于 该 模板 创建 的 网 页 中 是 可 以 编辑 的 。 


< L- TemplateBeginEditable name = "EditRegion3"--> 
<h3><a href=" # ">k iki </a></h3> 
< L- TemplateEndEditable --> 


图 8-7 模板 文件 中 可 编辑 区 域 标识 


(2) 可 选区 域 : 定义 基于 模板 生成 的 页 面 中 可 以 显示 或 者 不 显示 的 区 域 。 例 如 ,将 
Re rh pus <h3 ><a href 二 "#" 二 园林 旅游 二 /a 二 二 /h3 记 ”定义 成 可 选区 域 ,只 要 选 
中 该 元 素 ,然后 选择 “插入 ”一 “模板 对 象 >“ 可 选区 域 ”命令 ,该 操作 完成 后 ,环境 就 自动 
在 h3 元 素 的 前 后 添加 如 图 8-8 所 示 的 注释 代码 (斜体 部 分 标识 ) ,表明 h3 元 素 在 基于 该 
模板 创建 的 网 页 中 是 可 以 显示 或 者 隐藏 的 。 


< Ł- TemplateBegin If cond = 'OptionalRegion1 "--> 
<h3><a href=" # "> Pkk </a> </h3> 
< L- TemplateEndI f --> 


图 8-8 ”模板 文件 中 可 选区 域 标识 


(3) 可 编辑 的 可 选区 域 : 定义 基于 模板 生成 的 页 面 中 可 以 显示 或 不 显示 的 可 编辑 区 
We Ain KPIR“ <h> <a href=" # "二 园林 旅游 二 /a 之 一 /h3 二 ”定义 成 可 编 
辑 的 可 选区 域 ,只 要 选中 该 元 素 ,然后 选择 “插入 ”一 “模板 对 象 ”>“ 可 编辑 的 可 选区 域 ”" 命 
S ,该 操作 完成 后 ,环境 就 自动 在 h3 元 素 的 前 后 添加 如 图 8-9 所 示 的 注释 代码 (斜体 部 分 
标识 ) ,表明 h3 元 素 在 基于 该 模板 创建 的 网 页 中 是 可 以 显示 或 不 显示 的 可 编辑 区 域 。 


=!-- TemplateBeginlf cond= "OptionalRegion1" --> 
<!-- TemplateBeginEditable name= "EditRegion3" --> 
<h3><a href=" # "二 园林 旅游 一 /a 之 一 /h3 二 

<!-- TemplateEndEditable --— < !-- TemplateEndIf --> 


图 8-9 模板 文件 中 可 编辑 的 可 选区 域 标识 


2. 删除 可 编辑 区 域 . 可 选区 域 和 可 编辑 的 可 选区 域 

这 里 以 刚才 定义 好 的 h3 为 例 ,选中 h3 元 素 , 然 后 选择 “修改 ”一 “模板 ”一 “删除 模板 
标记 ”命令 或 者 直接 在 模板 文档 中 手工 删除 上 述 斜 体 部 分 字符 即 可 。 

3. 定义 “ 令 属 性 可 编辑 ”选项 

“ 令 属 性 可 编辑 ”选项 就 是 在 模板 中 定义 元 素 可 编辑 的 属性 ,以 便 在 基于 该 模板 生成 
的 网 页 中 可 以 对 元 素 相应 的 属性 进行 修改 。 下 面 以 给 元 素 “ 二 h3 二 a href=" # ">p 
林 旅 游 二 /a> 过 /h3 之 ”设置 可 编辑 的 背景 为 例 来 说 明 这 一 实现 过 程 。 


| O y | *ura.rssmmiusSsun sms] — — 


(1) B636]R“<Ch3>—a href=" # ">k </a></h3 >” JR it“ EW ”— 
“模板 ”命令 ,产生 如 图 8-10 所 示 的 二 级 菜单 ,选中 其 中 的 “ 令 属 性 可 编辑 ”命令 。 


rg #mmawsma- 


图 8-10 ”选择 “修改 >“ 模板 "命令 后 产生 的 二 级 菜单 


© 在 弹出 的 如 图 8-11 所 示 的 “可 编辑 标签 属性 ”对 话 框 中 , 单 击 “ 添 加 ”按钮 。 
© 弹出 如 图 8-12 所 示 的 Dreamweaver 对 话 框 ,在 文本 框 中 键入 style( 性 质 有 点 像 
利用 style 属性 给 h3 元 素 加 上 一 个 行内 CSS) , 单 击 “确定 ”按钮 返回 。 


选择 此 H3 标签 的 哪些 局 性 应 是 可 杭 辑 的 


ne 一 <) 全- 一 et — 
Jenenaa 机 和 新手 的 名 和 以 拓 和 到 CHE) 
标签 | 此 H3 标签 中 。 

== c>] — aN [ ma ) 
m O =s 

着 要 基于 此 模板 在 页 中 更 改 此 局 性 的 入， 

WAWA RKRN. 


要 更 改 该 局 性 是 否 可 编辑 ， 请 再 次 使 用 "使 
Kuwa e, 


图 8-11 “可 编辑 标签 属性 ”对 话 框 图 8-12 Dreamweaver 对 话 框 


中 在 如 图 8-13 所 示 的 “可 编辑 标签 属性 ”对 话 框 中 ,各 选项 说 明 如 下 。 

标签 : 用 于 输入 一 个 自 定义 的 变量 ,如 图 8-13 中 的 h3_bg。 

类 型 : 用 于 确定 属性 值 的 数据 类 型 。 如 style 属性 其 对 应 的 属性 值 类 型 为 “文本 ”, 任 
何 元 素 都 具有 style 属性 ,所 以 选择 style 作为 属性 .具有 很 强 的 通用 性 。 

默认 : 用 于 确定 属性 的 默认 值 。 如 这 里 设置 style 属性 的 默认 值 是 :“background: 
# cccj”。 只 要 是 符合 CSS 规范 的 background 声明 都 可 以 ,这 一 行 用 于 设置 基于 该 模板 
页 面 .页面 中 h3 元 素 的 默认 背景 是 # ccc 的 背景 色 。 单 击 “ 确 定 ” 按 钮 .返回 模板 文档 ,这 
时 选中 的 h3 元 素 变 为 “一 h3 style 一 "@@(h3_bg)@@" ><a href=" # "> bd I W£ 
二 /a 二 /h3 二 ”, 其 中 环境 自动 添加 的 斜体 文字 : style=" @@ (h3_bg) @@ " ,就 是 与 


awam ë 
Esa BODY RENSSR CERTA 
的 。 取消 

i = sm.) 


T aenant 
标签: hbe I 
== 
默认 : background #ccc; 
着 要 基于 此 模板 在 页 中 更 改 此 局 性 的 值 
请 选择 "修改 > "模板 局 人 性-。 
要 更 改 寺 羽 性 是 否 可 策 辑 ， 请 再 次 使 用 "使 
后 性 可 绩 往 ` 命 会 。 


图 8-13 “可 编辑 标签 属性 对话 框 的 各 个 参数 
图 8-13 所 示 对 话 框 相关 参数 的 呼应 。 
4. 删除 “ 令 属 性 可 编辑 ”选项 


若 要 删除 区 域 的 设置 ,可 选中 元 素 h3, 选 择 “ 修 改 ” 一 “模板 "一 “ 令 属 性 可 编辑 "命令 ， 
删除 图 8-13 所 示 对 话 框 中 的 标签 ,或 者 直接 在 模板 文档 中 手工 删除 上 述 斜 体 字 符 即 可 。 


813 网 页 模板 的 应 用 实例 


假设 创建 一 个 网 站 来 发 布 学 校 各 个 机 构 的 信息 ,网 页 效果 如 图 8-2 所 示 。 相 关 的 文 
字 和 图 片 素材 已 准备 就 绪 , 图 8-2 所 示 的 网 页 布局 如 图 8-14 所 示 , 网 站 中 的 所 有 页 面 除 
了 中 间 部 分 # main # content 的 内 容 不 同 外 ,其 余 都 相同 。 相 应 网 页 的 XHTML 代码 结 
构 如 图 8-15 所 示 。 


div# header 800X130 


main it aidie # main # content 
130X 400 
div# footer 800X32 
图 8-14 网 页 布局 图 
创建 该 网 站 的 主要 步 又 如 下 。 


(1) 清楚 需求 ,收集 整理 相关 的 文字 和 图 片 素材 。 
(2) 创建 一 个 能 达到 显示 效果 的 完整 网 页 。 
(3) 基于 该 网 页 创建 网 页 模板 ,编辑 网 页 模板 。 


| < O y | *uraarssmmiusSan sms] — — 


div#wrapper 
I 
div#header div#main div.clear div#footer 
[ 1 
h2 div#sider div#content p 
p ul h3 p e.. p p.more 


图 8-15 ”网 页 的 XHTML 代码 结构 图 


(4) 基于 该 模板 创建 其 他 的 网 页 。 

假设 上 述 步 又 (1) 和 步骤 (2) 已 准备 就 绪 , 相 关 的 文档 已 形成 。 下 面 以 例题 的 形式 完 
成 步骤 (3) 和 步骤 (4)。 

例 8-1 基于 素材 ch8\exp8-1 文件 夹 , 基 于 文件 夹 中 的 网 页 index. html 创建 一 个 名 
为 index. dwt 的 模板 ,然后 对 index. dwt 模板 完成 如 下 的 编辑 。 

(1) 将 网 页 模板 index. dwt 中 的 区 域 二 div id=" content" >+ </div> E X H U fi 


辑 区 域 。 

(2) 将 网 页 模板 index. dwt 中 的 区 域 二 div id=" footer" >+ </div> E N J T 
区 域 。 

(3) 将 网 页 模板 index. dwt 中 区 域 “ 二 p 二 下 属 二 级 院 .部 过 /p 过 的 下 边框 线 定义 成 
可 编辑 的 属性 。 


(4) 基于 网 页 模板 index. dwt 和 素材 中 的 “二 级 院 部 . doc" 文 档 ,依次 创建 介绍 电子 与 信息 
工程 学 院 , 机 电学 院 . 设 计 学 院 、 经 济 管理 学 院 . 医 药 卫生 学 院 和 外 语 学 院 的 网 页 dxxy. html, 
jdxy. html、sjxy. html jgxy. html, yyxy. html 和 wyxy. html, 并 修改 所 在 页 面 的 二 title 
标记 内 容 。 

(5) 修改 设计 学 院 所 在 网 页 sjxy. html 的 模板 属性 : 使 其 不 显示 页 脚 ,区 域 “二 p 二 下 
属 二 级 院 、 部 二 /p 二 ”的 下 边框 线 的 颜色 改 为 #06f”, 虚 线 dashed, 

(6) 修改 和 更 新 模板 index. dwt: 修改 位 于 二 div id=" sider" > #I< /div>> Z lB] fJ ul 
元 素 中 相关 a 标记 的 href 属性 值 ,使 其 指向 相关 的 网 页 。 

(7) 更 新 相关 网 页 ,浏览 效果 。 

实施 过 程 如 下 。 

A) 打开 素材 ch8\ exp8-1 文件 夹 中 的 网 页 index. html, 了解 代码 结构 ,浏览 网 页 
效果 。 

(2) 创建 模板 : 选择 文件 ”一 “另存 为 模板 ”命令 ,基于 网 页 index. html 创建 一 个 名 
为 index. dwt 的 模板 文件 ,同时 查看 站 点 中 index. dwt 模板 文件 的 存放 位 置 。 

(3) 模板 的 编辑 : 打开 当前 站 点 文件 夹 Templates 中 的 模板 文件 index. dwt, 做 如 下 
的 模板 编辑 。 

(D 将 区 域 二 div id= "content" 二 … 一 /div 过 定义 为 可 编辑 区 域 : 选中 该 区 域 ,选择 
“插入 ”一 “模板 对 象 "~ 可 编辑 区 域 " 命 令 即 可 。 


@ 将 区 域 天 div id= "footer" >- </div> 
定义 为 可 选区 域 : 选中 该 区 域 ,选择 “插入 ”一 


“模板 对 象 ”>“ 可 选区 域 " 命 令 即 可 。 过 反比 村 从 的 吉 些 扣 性 应 是 可 编辑 的 。 
© KKR <p> FRA RR M< p>” === 
的 下 边框 线 定义 成 可 编辑 : 选中 该 区 域 . 选 择 | ] 


“修改 ”一 “模板 ”一 “ 令 属性 可 编辑 "命令 ,在 弹 ‖ ww 一 一 J 
出 的 如 图 8-16 所 示 的 * 可 编辑 标签 属性 "对 话 | wmmpamacmamannana. 
框 中 , 单 击 “ 添 加 ”按钮 。 ero s a na 

@ 弹出 如 图 8-17 所 示 的 Dreamweaver 对 
话 框 ,在 文本 框 中 键入 style, 单 击 “ 确 定 ” 按 钮 
返回 。 在 如 图 8-18 所 示 的 “可 编辑 标签 属性 ” 图 8-16 “可 编辑 标签 属性 ”对 话 框 
对 话 框 中 ,输入 各 个 参数 的 值 。 


后 性 5h.) 


请 输入 新 局 性 的 名 称 以 插入 到 
此 己 标 答 中 。 F 标签 : Pbord 


Style an 


默认 : -bottom 2px #ccc solid; 


着 要 基于 此 模板 在 页 中 更 改 此 局 性 的 值 ， 
请 选择 "修改 > 模板 局 性 "。 

要 更 故 该 局 性 是 否 可 编 匈 ， 请 再 次 使 用 "使 
局 性 可 编辑 " 命 合 。 


图 8-17 Dreamweaver 对 话 框 图 8-18 输入 各 个 参数 


标签 : pborder, 自 定义 的 变量 。 

类 型 :“ 文 本 ”, 属 性 style 的 属性 值 是 文本 。 

默认 :“border-bottom:2px # ccc solid; ”默认 值 的 下 边框 线 声 明 。 

(4) 创建 基于 网 页 模板 index. dwt 的 页 面 : 选择 “文件 ”一 新建 "命令 ,在 如 图 8-19 
所 示 的 “新 建文 档 ” 对 话 框 中 选择 “模板 中 的 页 ”选项 ,然后 单 击 “ 创 建 " 按 钮 。 

(5) 修改 设计 学 院 所 在 网 页 sjxy. html 的 模板 属性 : 打开 网 页 sjxy. html, 选 择 “ 修 
改 ” 一 “模板 属性 ”命令 ,弹出 如 图 8-20 所 示 的 “模板 属性 ”对 话 框 。 

O 选取 参数 : OptionalRegionl, 取 消 “ 显 示 OptionalRegion1” 复 选 框 的 勾 选 ,使 其 不 
显示 页 脚 。 

© 选取 参数 : pborder, 将 其 值 修改 为 “border-bottom:2px #06f dashed; ”, 以 改变 
对 应 的 颜色 和 线 型 . 单 击 “确定 ”按钮 。 

(6) 修改 和 更 新 模板 index. dwt: 将 模板 文件 index. dwt 设 为 当前 文档 ,修改 位 于 一 
div id= "sider"> #l< /div2>2 B] ñ ul 元 素 中 相关 a 标记 的 href 属性 值 ,使 其 指向 相 匹 
配 的 网 页 。 如 将 “<li > <a href=" # "— H FSAA T. Bë 3 B£ < /a>> </li>>” W 3 3⁄4 


文档 类 型 [OWL Lo Transitional ~ 
国 当 模板 改变 时 更 新 页 面 Q) 


border-bottom: 2px. 


图 8-20 “模板 属性 "对话 框 


“<li > <a href 一 "dxxy. html" 之 电子 与 信息 工程 学 院 <</a><</1i 之 ”, 其 余 类 推 。 保 存 
对 模板 文件 的 修改 ,在 弹出 的 如 图 8-21 所 
示 的 “更 新 模板 文件 "对话 框 中 , 单 击 “更 
新 "按钮 。 

(7) 最 后 保存 模板 所 影响 的 相关 网 页 
文件 ,浏览 更 新 效果 。 

说 明 : 对 于 初学 者 而 言 ,要 清楚 哪些 
修改 是 在 模板 文件 中 进行 的 以 及 这 些 修改 
所 产生 的 影响 ,哪些 修改 是 在 网 页 文件 中 图 8-21 “更 新 模板 文件 ”对 话 框 
进行 的 以 及 与 模板 文件 之 间 的 关联 。 

通过 图 8-21 所 示 的 “更 新 模板 文件 ”对 话 框 选择 更 新 或 者 不 更 新 基于 模板 的 相关 网 
页 , 依 具体 情形 而 定 。 


8.2 库 项 目的 创建 与 应 用 


库 项 目 可 以 理解 为 自 定义 的 页 面 元 素 , 它 是 由 其 他 元 素 组 成 的 ,通常 将 网 站 中 反复 出 现 的 
部 分 定义 为 库 项 目 , 如 导航 栏 部 分 、 页 脚 部 分 或 者 Logo 部 分 , 库 项 目 是 以 扩展 名 为 . lbi( 源 于 库 
项 目的 英文 library item) 文 件 的 存在 的 ,而 且 网 站 中 若 有 库 项 目 , 一 般 有 一 个 名 为 library 的 
文件 夹 来 组 织 管理 这 些 库 项 目 文件 ,类 似 用 名 为 Templates 的 文件 夹 管理 模板 文件 一 样 。 

库 项 目 尽管 是 以 文件 形式 出 现 , 但 其 本 身 仅 仅 是 元 素 级 的 ,所 以 必须 将 库 项 目 谋 和 人 到 
页 面 中 才能 显现 其 功能 。 

库 项 目 可 基于 现 有 网 页 的 内 容 创 建 ,也 可 以 是 从 头 开始 创建 , 视 具 体 情形 而 定 。 一 旦 
定义 好 库 项 目 , 这 些 库 项 目 就 可 以 被 插入 到 网 站 的 其 他 页 面 中 ,多 次 使 用 ,以 提高 网 站 开 
发 的 效率 。 下 面 以 实例 的 方式 来 介绍 这 两 种 情形 。 


821 使 用 空白 文档 创建 库 项 目 及 应 用 


例 8-2 利用 空白 文档 来 创建 库 项 目 , 基 于 素材 ch8\exp8-2 文件 夹 ,要求 如 下 。 

(1) 创建 空白 的 库 项 目 文档 ,以 文件 名 footer. Ibi 保存 为 库 项 目 ,保存 位 置 为 文件 夹 
“library”, 库 项 目的 内 容 是 :“ < div id =" footer" > < p> ABC 工作 室 版 权 所 有 
Copyright &copy; 2014 ABC Studio All Rights Reserved. </p> </div>”, 

(2) 在 库 文 件 中 链接 指定 的 样式 文件 style footer. css”, 

(3) 库 项 目的 应 用 : 将 库 项 目 footer. lbi 插入 到 素材 dxxy. html 和 jdxy. html 中 最 后 
一 对 二 div class 王 "clear" 之 二 /div 之 之 后 , 即 文档 中 最 后 一 个 二 /div 之 之 前 。 

(4) 浏览 页 面 。 

实施 过 程 如 下 。 

(1) 选择 "文件 ”一 “新建 "命令 ,在 弹出 的 如 图 8-22 所 示 的 “新 建文 档 ” 对 话 框 中 选择 
“空白 页 ”界面 中 的 “ 库 项 目 ” 选 项 ,然后 单 击 * 创 建 " 按 钮 .创建 一 个 空白 网 页 。 


图 ton 


EB 


De 


图 8-22 “新 建文 档 - 库 项 目 ” 对 话 框 
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(2) 在 新 建 的 文档 中 输入 指定 内 容 , 然 后 以 footer. Ibi 文件 名 保存 到 指定 的 library 
XE, 
(3) 链接 外 部 样式 : 利用 link 元 素 将 样式 文件 引入 到 库 文件 ,如 图 8-23 所 示 。 


<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8"> 

<link href="../style/footer. css" rel="stylesheet" /> 

<div id=" footer" > 
<p>ABC 工作 室 版 权 所 有 Copyright &-copy; 2014 ABC Studio All Rights Reserved. 
</p> 

</div> 


图 8-23 在 库 文件 中 引入 样式 文件 


(4) 将 库 项 目 footer. lbi 插入 dxxy. html 网 页 文件 的 指定 位 置 。 

O 将 素材 中 的 dxxy. html 文件 置 于 当前 文档 ,浏览 网 页 在 插入 库 项 目 之 前 的 效果 。 

@ 将 光标 定位 到 文档 中 最 后 一 个 二 /div 二 之 前 ,选择 “文件 ”面板 中 的 “资源 ”选项 
卡 ,在 弹出 的 如 图 8-24 所 示 的 “资源 ?面板 中 , 单 击 面板 左 侧 下 方 的 图 标 1 罗 | ,就 会 显示 当 
前 站 点 中 已 创建 的 所 有 库 项 目 。 


DB BE 
ABC 工作 室 版 权 所 有 Copyright © 2014 
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图 8-24 “资源 "面板 
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@ 选中 库 项 目 footer. lbi, 然 后 单 击 面板 中 * 插 入 ”按钮 即 可 。 这 样 在 插入 的 位 置 自 
动产 生 一 段 带 浅黄 色 背 景 的 代码 ,如 图 8-25 所 示 。 该 代码 片段 传达 库 项 目 开始 和 结束 的 
位 置 以 及 库 文件 的 内 容 等 信息 ,这些 代 码 是 不 可 编辑 的 。 

I- # BeginLibraryltem "/library/footer. lbi" --> 
<link href="style/footer.css” rel="stylesheet" /> 
<div id=" footer" > 
<p> ABC 工作 室 版 权 所 有 Copyright &-copy; 2014 ABC Studio All Rights Reserved. </p> 


</div> 
<!-- # EndLibraryltem --> 


图 8-25 在 网 页 文件 中 插入 库 项 目 


@ 最 后 浏览 网 页 在 库 项 目 插入 之 后 的 效果 。 
(5) 将 库 项 目 footer. Ibi 插入 到 jdxy. html 网 页 文件 的 指定 位 置 ,实施 过 程 同上 ,不 
FIOR. 


822 基于 现 有 网 页 内 容 创 建 库 项 目 及 应 用 


例 8-3 利用 现 有 网 页 内 容 来 创建 库 项 目 , 基 于 素材 ch8\exp8-3 XER, ERUF 

(1) 基于 网 页 文件 index. html 中 的 一 div id=" sider" >- </div> KR UE — SA 
为 sider. lbi 的 库 项 目 , 保 存 位 置 为 文件 夹 library, 

(2) 库 项 目的 应 用 : 将 库 项 目 sider. Ibi 插入 到 素材 dxxy. html 网 页 文件 中 二 div id= 
"main" J ,浏览 页 面 。 

实施 过 程 如 下 。 

(1) 将 网 页 文件 index. html 设置 为 当前 文档 ,选中 网 页 中 指定 要 转换 为 库 项 目的 内 
<div id="sider" >- </div>. W # . {E Dreamweaver 环境 实际 操作 时 ,建议 在 “ 设 
计 ” 视 图 中 利用 标签 选项 卡 来 选择 比较 好 ,因为 车 在 “代码 ”视图 很 多 时 候 即 使 选中 了 相关 
区 域 , 接 下 来 的 命令 仍 处 于 灰色 的 不 可 操作 的 状态 ,也 许 这 个 小 瑕 症 在 以 后 的 高 版 本 中 会 
解决 。 

(2) 选择 “修改 ”一 “ 库 ”>“ 增 加 对 象 到 库 ” 命 令 ,将 选中 的 div 区 域 转化 为 库 文件 , 环 
境 将 自动 切换 到 “资源 ”面板 ,只 要 输入 库 项 目的 名 称 sider 即 可 。 如 本 地 站 点 没有 名 为 
Library 的 文件 夹 ,使 用 这 个 命令 环境 会 自动 生成 一 个 名 为 Library 的 文件 夹 , 用 于 管理 


库 项 目 。 
(3) 选择 文件 * 选 项 卡 , 回 到 * 文 件 "面板 ,站 点 中 就 有 DA Sas 
如 图 8-26 所 示 的 文件 夹 。 同 时 网 页 文件 index. html 的 相 sider lbi 
关 位 置 显示 浅黄 色 的 背景 。 图 8-26” 库 项 目 所 在 文件 夹 
(4) 将 素材 中 的 dxxy. html 文件 置 于 当前 文档 ,浏览 
网 页 在 库 项 目 插入 之 前 的 效果 。 
G) 将 光标 定位 到 文档 中 二 div id 二 "main" 记 ”之 后 ,切换 到 “资源 ”面板 , 单 击 面 板 左 
侧 图 标 菜单 中 的 多 | 图 标 ,选中 库 项 目 sider. lbi, 然 后 单 击 面 板 中 “插入 ”按钮 即 可 ,浏览 


效果 。 
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若 要 删除 定义 好 的 库 项 目 , 切 换 到 “资源 ”面板 ,选中 要 删除 的 库 项 目 , 然 后 单 击 “ 资 
源 ” 面 板 下 方 的 夯 按 钮 即 可 。 

例 8-2 和 例 8-3 仅仅 介绍 了 将 库 项 目 创建 的 两 种 方式 和 应 用 的 流程 ,素材 和 目标 非 
常 明确 ,在 实际 中 哪些 内 容 作为 库 项 目 应 视 具体 情形 而 定 ,这 是 需要 整体 规划 和 统筹 的 ， 
学 以 致 用 ,在 实践 中 提高 ,是 练 就 熟 手 的 不 二 途径 。 

至 此 模板 和 库 项 目的 创建 与 应 用 介绍 完毕 ,通过 这 些 实例 的 练习 ,希望 读者 能 体会 到 
恰到好处 地 应 用 模板 和 库 ,或 其 组 合 可 以 比较 轻松 地 提高 网 站 的 设计 效率 ,实现 网 页 风格 
的 统一 ; 还 有 助 于 网 站 的 维护 ,尤其 是 对 那些 规模 较 大 的 网 站 ,使 用 模板 和 库 的 技术 就 更 
能 体会 由 此 带 来 的 便利 ,所 以 希望 读者 在 实际 的 网 站 开发 过 程 中 灵活 地 使 用 模板 和 库 


技术 。 
选 PE a 
(1) Dreamweaver 中 网 页 模板 文件 的 扩展 名 是 ( ) 
A. . dot B. . html C. .dwt D. .lbi 
(2) 如 想 保持 网 站 中 页 面 布局 风格 的 一 致 ,可 使 用 的 技术 是 ( Ja 
A. 库 项 目 B. 模板 
C. 复制 和 粘贴 D. 单个 页 面 重 复制 作 


(3) 以 下 关于 模板 的 说 法 中 ,错误 的 是 ( )。 
A. 若 不 对 模板 文件 进行 任何 编辑 ,那么 基于 该 模板 的 网 页 是 完全 一 样 的 
B. 模板 文件 的 可 选项 内 容 在 新 的 页 面 只 能 设置 为 显示 或 不 显示 ,其 具体 内 容 不 
能 修改 
C. 一 旦 模板 文件 变更 ,基于 模板 的 相关 页 面 一 定 会 随 之 变化 
D. 一 个 网 站 中 视 具体 情形 一 般 要 设置 多 个 模板 
(4) 以 下 关于 库 项 目的 说 法 中 ,错误 的 是 ( )。 
A. 库 项 目 相当 于 一 个 页 面 元 素 B. 库 项 目 是 一 个 独立 的 文件 
C. 库 项 目 一 般 位 于 library 文件 夹 下 D. 库 项 目 可 以 单独 被 浏览 
(5) Dreamweaver 中 库 项 目的 扩展 名 是 ( Js 
A. .lbi B. template C. .dwt D. library 


自主 训练 


练习 8-1: 模板 的 创建 与 应 用 。 基 于 素材 ch8\ex8-1 文件 夹 ,完成 如 下 的 操作 。 
(1) 熟悉 文件 代码 结构 。 

O 阅读 网 页 index. html, 画 出 网 页 元 素 结 构图 。 

@ 阅读 网 页 并 参考 样式 文件 index. css, 画 出 网 页 的 布局 图 。 

(2) 创建 网 页 模板 : 基于 网 页 index. html 创建 一 个 名 为 index. dwt 的 模板 。 
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(3) 编辑 模板 : 对 index. dwt 模板 完成 如 下 的 编辑 。 

O 将 网 页 模板 index. dwt 中 的 区 域 二 div id 一 "text " 二 … 到 /div 过 定义 为 可 编辑 
区 域 。 

© 将 网 页 模板 index. dwt 中 的 区 域 二 div id=" footer" >+ </div> 3E X H TJ i 
区 域 。 

@ 将 网 页 模板 index. dwt 中 位 于 区 域 二 div id= "menu" > #l< /div> Z [aJ H — ul> -e 
去 /ul 元 素 的 背景 和 左边 框 线 定义 为 可 编辑 。 

(4) 创建 基于 模板 index. dwt 的 网 页 。 

O 基于 网 页 模板 index. dwt 和 素材 中 “四 季 . doc" 文 档 ,依次 创建 介绍 春 夏 秋冬 的 网 
页 spring. html, summer. html, fall. html 和 winter. html, 并 修改 所 在 页 面 的 二 title 二 标 
记 的 内 容 。 

© 修改 秋季 所 在 网 页 fall. html 的 模板 属性 : 修改 二 dl 二 … 二 /ul 二 的 左边 框 线 和 背 
景 表现 。 

© 修改 冬季 所 在 网 页 winter. html 的 模板 属性 : 使 其 不 显示 页 脚 、 并 修改 二 ul 二 … 
二/ul 二 的 左边 框 线 和 背景 表现 。 

(5) 更 新 模板 和 相关 网 页 。 

O 修改 和 更 新 模板 index. dwt: 修改 位 于 二 div id="menu" > #l< /div2> Z [B] ñ ul 
元 素 中 与 a 标记 相关 的 href 属性 值 ,使 其 指向 相关 的 网 页 。 

© 更 新 相关 网 页 ,浏览 效果 。 

练习 8-1 配套 素材 中 index. html 文件 源 代码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 

w3.org/ TR/xhtml1/DTD/xhtml1-transitional. dtd" > 

<html xmlns= "http://www. w3.org/1999/xhtml"> 

<head> 

<meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" /> 

<title>Four-Season< /title> 


<link href= "style/index. css" rel= "stylesheet" type="text/css" /> 
</head> 


<body> 
<div id= "header" > 
<div id="logo"><a href=" # "><img src= "img/s_logo. gif" alt 一 "返回 首页 ”width 一 
"416" height="79" border="0" /></a></div> 
</div> 
<div id= "main"> 
<div id="box"> 
<div id="menu"> 
<ul> 
<li><a href=" # ">-# 9 9GG'</a></li> 
<li><a href=" # ">8# K< /a></li> 
<li><a href=" # ">-# </a></li> 
<li><a href=" # ">44 K </a></li> 
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</ul> 
</div> 
<div id="text"> 
<hl ># X</h1> 
<P>ËR (Spring), X fF fE , Jë —4E rh JS —4- Eh ERIA 3.4.5 月 。 而 南 半 
球 却 是 在 九 月 开始 ,十 一 月 结束 。 如 澳大利亚 .巴西 .南非 等 。 气候 学 上 以 连续 5 日 平均 气温 稳定 
超过 10"C 为 春季 的 开始 。 春天 气候 温暖 适中 ,中 国内 陆 大 部 分 地 区 少雨 。 万 物 生机 萌发 , 天气 多 
X, ERER. </p> 
<p> 青春 : 因 春 天 草木 青青 而 得 名 。 AR: “A ARKAAN, FEES”. </p> 
<P> 三 春 : 因为 春季 包含 了 一 二 三 月 ,而 合 称 “三 春 ”。 孟 郊 诗 :“ 谁 言 寸 草 心 , 报 得 三 春 
WE”, </p> 
去 p> 踏 青 : 又 叫 春游 、 探 春 等 。 中 国 的 踏青 习俗 由 来 已 久 , 传 说 远 在 先秦 时 已 形成 ,也 有 说 
始 于 魏 晋 。 千 百年 来 ,踏青 渐 成 了 一 种 仪式 ,仿佛 只 有 行 了 这 种 仪式 , 才 真正 拥有 了 春天 。"* 逢 春 不 
游乐 ,但 铠 是 奖 人 。” 白 居 易 的 (春游 ) 诗 正 是 这 种 心境 的 写照 二/p 二 
</div> 
<div id="footer" > HHE: <a href=" # " >http://www. baidu. com</a></div> 
</div> 
</div> 
</body> 


</html> 
练习 8-2 配套 素材 中 index. css 文件 源 代码 如 下 : 


* (í 
margin: 0; 
padding: 0; 
border: 0; 
list-style:none; 
font-family: "宋体 "，sans-serif; 
Íont-size: 12px; 
color: #000; 
text-decoration: none; 
) 
body { 
background: # ccc; 
padding-top: 5px; 
) 
# header { 
background: #9c0 url(../img/s_header_bg. gif) ; 
height: 100px; 
width: 620px; 
border-width: 1px lpx 0; 
border-style: solid; 
border-color: #060; 
margin: 0 auto; 
} 
# logo { 
float: left; 
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margin: 13px 0 0 10px; 
) 

# ver ( 

background: # F90; 
width: 170px; 
margin-top: 84px; 
float: right; 

) 

# ver img { 

float: right; 
margin-right: 3px; 

) 

# main { 

width: 622px; 

margin: 0 auto; 

) 

# box í 

background: # 060; 
float: left; 

width: 620px; 
border-width: 0 lpx 1px; 
border-style: solid; 
border-color: #060; 

) 

# menu ( 

text-align: left; 

width: 148px; 

) 

# menu ul { 

float:left; 

margin: 20px 0 0 24px; 
border-left: # f90 4px solid; 
background: #9C0; 

) 

# menu li { 
text-indent:lem; 
line-height:2.5; 
border-bottom:1px #000 solid; 
width: 96px; 

color: # ccc; 

} 

# text { 

background: # fff; 
float: right; 

width: 472px; 

} 

# text hl ( 
font-weight: bold; 


font-size: 14px; 
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text-align: center; 
letter-spacing: lem; 
margin: 15px 0 ; 
padding-bottom : 5px; 
border-bottom: 3px double # 060; 
} 

# text p { 
line-height: 1.4; 
text-indent:2em; 
padding:0 15px; 
margin-bottom:0.8em; 
) 

# footer ( 
background: # f90; 
text-align: center; 
float: right; 

width: 472px; 
padding: 5px 0; 

) 

a:hover ( 

color: # FFF; 

) 


练习 8-3: 库 项 目的 创建 与 应 用 。 基 于 素材 ch8\ex8-2 文件 夹 ,完成 如 下 的 操作 。 

(1) 基于 网 页 文件 index. html 中 的 一 div id="menu" 二 … 一 /div 二 内容 创建 一 个 名 
为 menu. lbi 的 库 项 目 ,保存 位 置 为 文件 夹 library。 

(2) 库 项 目的 应 用 : 将 库 项 目 menu. lbi 插入 素材 fall. html 网 页 文件 中 二 div id= 
"box" 二 之 后 ,浏览 页 面 。 


通过 前 面 章节 的 学 习 , 已 掌握 制作 一 个 网 站 所 需 的 技术 和 技巧 。 其 中 包括 用 网 页 文 
件 的 基本 结构 ,页面 元 素 的 添加 ,用 CSS 设置 网 页 的 布局 和 表现 、 模 板 与 库 等 基本 技术 。 
从 纯 技 术 角 度 阐 述 网 站 制作 的 技巧 是 本 书 的 主旨 。 然 而 ,网 站 的 实现 如 果 放 在 项 目 这 样 
的 宏观 维度 考虑 ,也 只 能 算是 其 中 一 个 环节 而 已 。 这 好 比 建造 一 栋 房 子 ,整个 制造 过 程 只 
需要 优秀 的 工程 师 和 合格 工人 即 可 ,但 是 作为 一 个 建筑 项 目 , 建 造 过 程 只 是 其 中 一 个 步 
又 。 其 实 项 目 从 地 皮 的 测量 ,竞投 成 本 估算 等 已 经 开始 了 ,一 栋 建 成 的 房子 只 是 结果 而 
非 过 程 的 全 部 。 甚 至 当 房 子 建造 完毕 也 不 是 终结 ,还 包括 后 期 的 维护 ,修缮 等 。 网 站 和 网 
站 项 目 也 是 这 种 关系 ,网 站 只 是 一 个 阶段 性 的 结果 而 非 网 站 项 目的 全 部 。 一 个 成 功 的 网 
站 项 目 往往 需要 优秀 的 技术 团队 负责 网 站 的 实现 ,然而 单单 有 这 样 的 技术 团队 也 不 能 确 
保 整 个 网 站 项 目的 成 功 。 本 章 将 跳出 纯 技 术 的 领域 看 网 站 ,把 视野 扩展 到 项 目的 宏观 维 
度 或 者 从 方法 论 的 层面 来 探究 成 功 的 网 站 项 目 是 如 何 构建 和 运作 的 。 


9.1 网 站 项 目的 需求 分 析 


人 的 行为 总 是 基于 需求 的 ,只 有 被 需要 的 东西 才 会 有 价值 。 但 在 实际 中 作为 行为 的 
起 点 ,需求 往往 容易 让 人 忽略 。 这 一 点 和 空气 的 待遇 很 相似 : 人 类 明明 是 缺 几 分 钟 空气 
就 会 窒息 死亡 ,但 空气 却 在 18 世纪 才 开 始 被 深入 了 解 。 祖 先 们 的 经 验 是 有 意义 的 ,至 少 
现在 做 软件 项 目 ( 包 括 网 站 项 目 ) 时 ,往往 将 看 似 简 单 的 东西 放 在 相当 重要 的 位 置 。 需 求 
分 析 就 是 其 中 之 一 。 

“人 的 行为 总 是 基于 需求 ”, 网 站 项 目 同样 如 此 。 哪 怕 是 最 简单 的 课堂 练习 项 目 , 也 是 
基于 某 种 需求 的 (老师 的 压力 等 ); 正规 的 商业 网 站 更 是 如 此 ,这 类 网 站 的 需求 更 加 直接 ， 
那 就 是 创造 经 济 效益 。 这 些 道理 是 不 证 自明 的 ,那么 为 什么 要 进行 需求 分 析 呢 ? 正如 上 
面 空气 的 例子 ,虽然 人 们 知道 需求 驱动 的 道理 ,但 需求 本 身 却 是 经 常 被 牌 曲 导致 看 不 清楚 
的 。 人 们 真 的 会 对 自己 网 站 需要 什么 不 清楚 吗 ? 是 的 ,这 是 常 有 的 事情 。 而 且 这 种 情况 
不 单单 存在 网 站 项 目 上 ,也 包括 人 生 的 每 个 阶段 。 正 因为 大 多 数 人 看 需求 总 是 雾 里 看 花 ， 
所 以 才 有 所 谓 的 需求 分 析 。 

需求 分 析 是 一 项 看 起 来 简单 实际 上 又 相当 艰难 的 工作 。 需 求 分 析 分 两 种 情况 。 第 一 
种 是 需求 方 (出 资方 ,或 者 叫 甲 方 ) 和 劳务 方 (开发 方 .或 者 叫 乙方 ) 是 同一 主体 的 ,也 就 是 
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俗称 的 自主 开发 。 第 二 种 是 甲 方 委托 乙方 开发 ,也 就 是 甲 方 和 乙方 是 不 同 主体 。 这 两 种 
情况 都 要 进行 需求 分 析 。 表 面 上 看 第 一 种 情况 的 需求 分 析 会 更 加 简单 ,第 二 种 因为 涉及 
不 同 利益 的 公司 之 间 的 沟通 ,会 显得 更 加 困难 。 事 实 上 ,这 两 种 情况 的 难度 是 相等 的 , 甲 
方 乙方 重合 的 情况 有 时 候 会 更 加 复杂 ,因为 自主 开发 往往 没有 严格 的 需求 协议 ,经 常 轻率 
地 变动 需求 ,因此 更 容易 出 问题 。 

对 于 软件 项 目 , 需 求 分 析 有 着 固定 的 套路 ,并 应 有 相应 的 需求 分 析 文 档 。 对 于 网 站 
(前 端的 需求 分 析 不 必 完 全 按照 软件 工程 的 套路 。 网 站 除了 功能 的 需求 还 有 审美 的 需 
求 ,这 是 网 站 项 目 比较 特殊 的 地 方 。 甲 方 往往 只 知道 未 来 网 站 的 一 个 大 概 的 设想 ,但 是 不 
担保 他 的 设想 一 定 能 有 一 个 好 的 效果 。 因 为 对 于 大 多 数 人 ,尤其 是 对 计算 机 不 熟悉 的 人 ， 
可 能 会 分 辨 出 一 个 网 站 的 美 丑 好 坏 ,然而 让 他 们 自己 去 设计 一 个 方案 往往 是 极其 糟糕 的 。 
所 以 做 需求 分 析 的 时 候 , 不 能 引导 甲 方 去 设计 方案 ,需要 的 是 要 理解 甲 方 的 意愿 ,让 他 放 
心地 让 乙方 为 他 设计 方案 。 下 面 是 需求 分 析 的 一 些 关键 点 。 


911 确定 受众 


做 网 站 的 需求 分 析 ,首先 要 确定 的 一 件 事情 是 该 网 站 的 主要 用 户 是 哪个 群体 。 不 能 
笼统 地 说 本 网 站 是 老少 咸 宜 ,用 户 多 多 益 善 ,因为 这 样 毫 无 意义 。 要 确定 的 是 最 能 为 网 站 
创造 商业 价值 的 用 户 群 ,这 才 是 核心 用 户 群 ,只 有 先 抓 住 这 个 群体 才能 维持 网 站 的 生存 和 
发 展 。 拓 展 用 户 群 是 有 必要 的 ,但 这 只 能 在 巩固 了 核心 用 户 群 后 才能 进行 。 而 从 网 站 开 
发 的 角度 ,没有 明确 受众 的 网 站 是 最 难 设 计 的 。 因 此 确定 核心 用 户 群 不 但 能 回归 到 网 站 
最 本 质 的 需求 ,还 能 有 效 地 降低 网 站 实现 和 运营 的 难度 。 


1. 网 站 主 营业 务 和 受众 的 关系 


通常 受众 是 和 网 站 的 主 营 业务 直接 相关 的 。 一 个 卖 童装 的 网 站 和 一 个 求职 网 站 的 核 
心 用 户 群 应 该 是 没有 多 少 重合 度 的 。 但 很 多 时 候 , 网 站 的 受众 并 不 是 那么 好 确定 的 。 例 
如 ,要 做 一 个 综合 类 的 门户 网 站 。 这 个 网 站 包括 的 内 容 有 时 政 、 经 济 、 金 融 、 娱 乐 . 体 育 、 教 
育 , 甚 至 数码 产品 等 频道 。 那 么 能 立刻 确定 受众 吗 ? 鉴于 内 容 的 广度 ,最 终 还 是 得 到 一 个 
毫 无 用 处 的 分 析 结 果 : 本 网 站 老少 咸 宜 。 如 果 没 有 区 分 度 ,那么 受众 分 析 等 于 从 来 没 做 
过 。 通 常 希望 网 站 的 访问 用 户 群 越 大 越 好 ,然而 在 网 站 项 目 构思 的 阶段 ,进行 受众 分 析 的 
时 候 要 遵守 越 小 越 好 的 原则 。 以 综合 门户 网 站 为 例 , 虽 然 网 站 业务 几乎 覆盖 全 年 龄 段 , 但 
是 可 以 通过 抓 住 当 中 的 核心 业务 ,从 而 确定 核心 受众 。 一 般 综合 性 门户 网 站 ,如 新 浪 、 网 
D .腾讯 .凤凰 网 等 ,都 是 以 新 闻 为 主 的 ,新 闻 是 这 一 类 网 站 共有 的 核心 业务 。 那 么 关心 新 闻 
的 一 般 是 哪些 用 户 呢 ? 大 多 数 是 成 年 人 ,有 固定 工作 .有 固定 收入 ,年 龄 大 概 在 25 一 45 岁 。 
这 个 群体 的 人 比较 关心 时 政 经 济 等 新 闻 ,而 门户 网 站 的 核心 业务 正好 能 满足 他 们 的 需求 。 
那么 综合 网 站 那些 非 核心 业务 ,如 数码 ,教育 等 ,起 到 什么 作用 呢 ? 这些 非 核心 业务 也 是 
在 某 种 程度 上 满足 受众 的 次 要 需求 。 如 教育 频道 ,核心 受众 可 能 已 经 有 子女 ,那么 他 可 能 
在 看 新 闻 的 同时 去 关心 教育 频道 的 信息 ,如 择 校 信息 、 考 试 报名 等 。 核 心 受众 因为 网 站 的 
核心 业务 而 访问 网 站 ,但 非 核心 业务 同时 也 在 增加 网 站 本 身 的 黏 性 。 

如 上 所 述 ,受众 分 析 似 乎 也 不 是 太 难 , 只 要 抓 准 核心 业务 ,那么 核心 受众 就 自然 确定 
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了 。 可 是 “魔鬼 ”总 隐藏 在 细节 当中 。 而 这 些 细节 是 做 网 站 需求 分 析 时 不 能 忽略 的 。 回 到 
上 面 提 到 的 4 个 综合 门户 网 站 : 新 浪 (http://www. sina. com. cn)、 网 易 (http://www. 
163. com) ,腾讯 网 (http://www. qq. com)、 凤 凰 网 (http://www. ifeng. com)。 这 4 个 网 
站 的 核心 业务 应 该 都 是 差不多 的 ,但 细心 分 析 各 自 的 首页 ,它们 却 又 有 很 大 的 不 同 。 新 
浪 、 网 易 和 凤凰 网 内 容 安 排比 较 密 集 ,总 是 希望 在 一 个 屏幕 提供 尽 可 能 多 的 信息 ,适合 高 
速 浏览 的 人 群 。 而 腾讯 网 首页 内 容 比 较 稀 疏 ,一般 适 合 阅读 速度 不 快 的 人 群 。 读 者 不 妨 
去 书店 或 者 图 书馆 调研 一 下 ,一般 成 年 人 的 书籍 文字 密度 都 会 大 一 点 ,而 年 龄 段 越 低 文字 
的 密度 就 越 小 。 典 型 的 是 幼儿 读物 ,除了 配 图 外 一 页 中 可 能 就 只 有 几 行 放 得 很 大 的 文字 。 
从 这 个 规律 反 推 ,腾讯 网 目标 受众 和 其 他 三 大 新 闻 网 站 的 目标 受众 年 龄 段 可 能 不 一 样 。 
从 颜色 的 角度 分 析 结 论 会 更 加 明显 。 腾 讯 网 用 比较 欢快 的 浅 蓝 色 为 主 色调 ,整个 首页 是 
比较 年 轻 活力 的 风格 。 而 其 他 三 大 新 闻 网 站 都 是 用 比较 简洁 稳重 的 设计 风格 ,如 图 9-1 
所 示 。 其 中 凤凰 网 还 用 了 比较 沉 的 颜色 作为 主 色 调 , 如 图 9-2 所 示 。 可 见 腾讯 网 的 目标 
受众 是 年 龄 偏 小 的 群体 ,而 其 他 三 大 门户 网 站 则 倾向 更 为 成 熟 的 群体 。 就 算 把 腾讯 网 排 
除 在 外 ,新浪 .网 易 和 凤凰 网 的 受众 也 未 必 完 全 一 致 。 从 内 容 安 排 上 看 ,凤凰 网 首页 更 多 
的 是 放 视 频 链 接 ,这 可 能 是 因为 它 本 身 掌 握 风 凰 卫视 的 资源 ,在 新 闻 视 频 方面 有 得 天 独 厚 
的 优势 。 而 凤凰 网 本 身 也 希望 实现 网 站 用 户 是 凤凰 卫视 观众 的 双向 转换 ,新 浪 和 网 易 则 
更 注重 文字 新 闻 报 道 ,是 典型 的 网 络 媒体 。 
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图 9-2 凤凰 网 首页 截图 


从 上 述 四 大 门户 网 站 分 析 可 知 ,虽然 它们 主 营 业务 相同 ,但 业务 细节 和 所 拥有 的 资源 
决定 它们 的 受众 不 完全 重合 。 腾 讯 网 依托 的 是 QQ 和 微 信 两 大 通信 软件 ,用 户 群 年 龄 一 
般 是 15 一 25 岁 的 青少年 ,因此 网 站 受众 定位 是 这 个 年 龄 段 。 而 其 他 三 大 门户 网 站 定位 于 
有 和 较 强 独立 思考 能 力 , 有 独立 收入 ,而 且 平时 时 间 不 多 的 群体 ,典型 的 是 25 一 45 岁 这 个 年 
龄 段 。 这 里 并 不 是 说 这 些 门 户 网 站 放弃 其 他 年 龄 段 的 受众 ,相反 对 一 个 网 站 来 说 用 户 当 
然 是 多 多 益 善 的 。 但 是 像 这 种 著名 的 网 站 ,构建 前 肯定 做 好 了 受众 分 析 , 而 网 站 的 结构 、 
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风格 内容 安排 都 是 优先 配合 核心 受众 的 。 当 中 它们 又 是 把 自 有 的 业务 资源 结合 起 来 ,将 
核心 受众 的 范围 进一步 裁减 。 在 网 站 的 受众 分 析 中 ,要 遵循 “ 越 小 越 好 ”的 原则 。 


2. 多 维度 受众 分 析 


理 清 楚 主 营业 务 后 ,受众 群体 的 大 致 轮廓 就 呼之欲出 了 。 然 而 如 果 仅 满足 于 此 , 那 大 
量 有 价值 的 信息 就 会 给 掩埋 掉 。 假 设 要 做 一 个 童装 网 站 ,该 网 站 的 主 营业 务 很 简单 ,就 是 
销售 童装 ,那么 ,受众 自然 就 是 儿童 。 按 照 套路 可 选 一 些 可 爱 的 颜色 ,设计 一 些 卡通 化 的 
装饰 图 片 ,把 网 站 装扮 成 一 个 儿童 乐园 。 这 个 思路 大 体 上 是 对 的 ,但 因为 没有 从 其 他 角度 
分 析 受众 ,因此 可 能 产生 一 些 致命 的 问题 。 可 以 肯定 网 站 的 受众 是 儿童 ,网 站 可 以 极力 讨 
好 他 们 ,但 从 另 一 个 角度 分 析 ,真正 下 订单 的 不 可 能 是 儿童 自己 ,而 是 他 们 的 父母 ,而 为 人 
父母 者 不 可 能 像 儿童 那样 容易 讨好 。 在 这 个 案例 中 ,网 站 受众 是 复杂 的 ,所 以 要 从 多 个 角 
度 分 析 才 能 制定 最 优 的 策略 。 首 先 网 站 要 吸引 儿童 ,这 是 首要 条 件 ,因为 如 果 儿 童 不 喜 
欢 , 那 么 家 长 根本 不 会 为 之 付款 。 但 仅 此 还 不 够 ,还 必须 从 家 长 的 角度 考虑 。 例 如 ,家 长 
会 关心 童装 的 面料 是 否 适合 孩子 ,价格 是 否 合理 ,其 至 支付 的 过 程 是 否 可 靠 等 ,因此 铺 天 
盖 地 的 卡通 化 风格 会 在 某 种 程度 上 削弱 家 长 们 的 购买 决心 。 除 了 需要 从 孩子 的 角度 分 
析 , 也 要 从 家 长 的 角度 分 析 , 然 后 精心 设计 出 一 个 完美 的 方案 。 

除了 多 角度 分 析 受 众 的 构成 外 ,也 要 多 角度 分 析 受 众 的 身份 ,一 个 人 的 身份 总 是 多 重 
的 。 例 如 , 同 是 白领 ,有 的 是 单身 ,有 的 是 已 婚 。 多 重 身份 的 分 析 可 以 进一步 将 受众 细 分 ， 
而 这 样 网 站 就 会 更 加 有 针对 性 。 如 一 个 求职 网 站 , 它 的 受众 可 能 是 白领 阶层 。 如 果 受 众 
多 为 已 婚 人 士 , 那 么 制作 网 站 就 应 该 把 本 地 职位 信息 放 在 显眼 的 位 置 ,因为 已 婚 人 士 一 般 
不 愿意 去 太 远 的 地 方 工作 ; 如 果 求 职 网 站 的 受众 多 为 单身 人 士 ,那么 就 应 该 去 掉 本 地 职 
位 的 优先 级 ,而 应 该 重点 提供 薪资 水 平 高 ,发展 潜力 好 的 职位 。 
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一 个 优秀 的 网 站 是 技术 和 艺术 的 完美 结合 ,是 功能 与 意义 的 高 度 交 融 。 在 功能 主义 
时 代 , 功 能 永远 是 第 一 位 的 ,功能 有 无 是 竞争 的 主要 焦点 。 然 而 ,任何 技术 发 展 成 熟 后 , 功 
能 主义 总 是 慢 慢 衰退 。 正 如 手机 领域 .最 开始 的 手机 只 要 通话 清晰 \ 信 号 稳定 ,因为 这 是 
主要 功能 ,所 以 一 般 都 不 会 太 注重 手机 的 外 观 设 计 和 用 户 体验 。 到 智能 手机 时 代 , 手 机 主 
要 功能 已 经 基本 稳定 ,用 户 开始 关心 功能 以 外 的 东西 ,更 加 关注 个 性 和 审美 情趣 ,这 才 有 
便 果 的 iPhone 的 巨大 成 功 。 在 网 页 设计 领域 ,技术 早已 经 成 熟 ,如 果 在 互联 网 初期 ,可 以 
不 注重 外 观 设计 ,只 要 提供 充分 的 信息 即 可 。 然 而 ,XHTML 和 CSS 都 已 经 是 网 页 设计 
人 员 的 人 门 必 备 了 ,那么 在 同样 的 功能 下 .用户 体验 就 是 决定 竞争 天 平 倾向 的 夸 码 。 

不 过 这 随 之 导致 了 一 个 严重 的 问题 , 那 就 是 网 页 设计 到 现在 几乎 成 了 一 个 需要 复合 
人 才 的 领域 。 一 个 优秀 的 网 站 ,除了 技术 过 关 的 程序 员 ,还 必须 有 富有 创意 的 美工 。 在 一 
些 专业 的 公司 ,网 页 的 设计 和 实现 是 两 个 明确 分 工 的 岗位 。 专 业 的 美工 和 前 端 工程 师 紧 
密 合作 ,才能 做 出 优秀 的 网 站 。 然 而 ,很 多 时 候 并 非 这 样 ,尤其 现在 JavaScript 的 引入 ,网 
页 上 可 以 添加 很 多 动态 的 效果 ,而 美工 往往 能 够 给 出 一 个 静态 的 设计 图 ,但 对 于 能 够 做 哪 
些 动态 内 容 他 们 是 力不从心 的 ; 相反 ,前端 工程 师 能 够 掌握 XHTML 、CSS 和 JavaScript 
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等 网 页 技术 ,然而 职业 的 逻辑 思考 方式 让 他 们 缺乏 美学 的 考量 。 技 术 和 艺术 的 矛盾 随 着 
网 站 越 来 越 复杂 日 益 突出 。 

作为 网 站 开发 人 员 ,不 能 认为 设计 仅仅 是 美工 的 事情 。 虽 然 开发 者 在 美学 上 可 能 比 
不 上 专业 美工 ,但 也 不 应 该 花 无 数 时 间 学 习 网 页 技术 ,做 出 的 网 站 却 毫 无 美感 。 相 反 ,应 
该 积极 地 向 优秀 的 网 站 学 习 , 未 来 前 端 工程 师 可 能 要 更 多 地 承担 网 页 设计 的 工作 。 作 为 
前 端 工程 师 , 没 有 受过 专业 的 美学 训练 ,怎样 才能 设计 出 优秀 的 网 站 呢 ? 向 现成 的 优秀 网 
站 学 习 是 最 快捷 的 途径 。 

学 习 网 页 设计 有 一 个 好 处 , 即 网 页 都 是 开源 的 ,可 以 很 方便 地 查看 网 页 的 源 代码 。 那 
么 应 该 向 优秀 网 站 学 习 什 么 呢 ? 


1. 布局 


布局 是 指 一 个 网 页 内 容 安排 的 方式 。 简 洁 优雅 的 布局 不 但 能 在 视觉 上 讨好 用 户 ,而 且 
能 够 简化 网 页 实现 的 工作 。 目 前 网 页 布局 采用 DIV 十 CSS 技术 。 这 种 布局 方式 不 但 优雅 ， 
而 且 可 以 在 不 同 网 页 甚至 网 站 间 重 复 使 用 。 它 有 着 强大 的 表达 能 力 ,也 方便 日 后 网 站 的 维护 。 


2. 色彩 


色彩 选择 和 判断 是 专业 美工 相对 一 般 人 的 最 大 优势 ,这 也 是 最 值得 向 优秀 网 站 学 习 的 地 
方 。 没 有 经 过 专业 美学 训练 的 人 只 会 主观 判断 现成 设计 的 色彩 好 坏 ,但 要 自己 设计 一 个 配色 
方案 往往 是 非常 糟糕 的 。 这 时 候 , 最 快 的 方法 是 参考 同类 的 网 站 ,把 别人 的 配色 方案 学 过 来 。 
一 般 人 会 觉得 色彩 越 丰富 越 好 。 事 实 上 ,很 多 优秀 网 站 的 色彩 都 是 不 太 复杂 的 。 一 般 是 选 定 
一 两 种 主 色 调 ,然后 通过 深浅 ,明暗 和 纹理 等 做 出 不 同 的 变化 。 当 然 也 可 以 参考 优秀 网 站 的 
配色 方案 ,并 从 中 修改 别人 的 方案 。 如 果 对 颜色 搭配 不 熟悉 ,可 以 参考 http://www. 
benjaminmoore. com/ en-us/ paint-color/ cornsilk ,这 个 网 站 会 列 出 某 种 颜色 的 最 佳 搭配 颜色 。 


3. 结构 


这 里 说 的 结构 不 是 指 网 页 的 布局 结构 ,而 是 整个 网 站 的 结构 。 一 般 综 合 类 网 站 分 三 
级 结构 : 首页 、 分 栏目 页 和 文章 页 。 但 不 同 主题 网 站 的 结构 没有 必要 用 一 个 套路 。 例 如 ， 
一 些 网 站 选择 做 个 封面 网 页 ,有些 内 容 比 较 少 的 网 站 可 能 不 需要 设置 分 栏目 页 。 优 秀 的 
网 站 总 能 安排 一 个 合理 的 结构 ,让 用 户 快速 地 找到 自己 想 要 的 资讯 。 


4. 优化 


网 站 优化 是 一 个 比较 专业 的 话题 。 首 先是 浏览 器 兼容 性 优化 :一般 优秀 的 网 站 能 够 
在 不 同 浏览 器 有 一 致 的 表现 。 而 初学 者 做 的 网 站 往往 在 某 些 浏览 器 会 严重 走样 ,如 IE6。 
其 次 ,优秀 网 站 的 代码 是 有 利于 搜索 引擎 搜索 的 ,它们 尽 可 能 避免 使 用 不 利于 搜索 引擎 索 
引用 的 代码 结构 。 这 对 网 站 发 布 后 在 搜索 引擎 排名 会 有 很 大 的 影响 。 

在 选择 学 习 对 象 时 ,本 书 推荐 的 网 站 (http://www. freewebsitetemplates. com) 上 有 
各 种 风格 的 网 站 模板 ,而 且 全 部 是 DIV 十 CSS 布局 ,很 有 参考 价值 。 
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913 收集 信息 


未 来 总 是 由 过 去 和 现在 决定 的 。 如 果 网 站 项 目的 未 来 预期 是 建设 一 个 优秀 网 站 , 那 
么 就 必须 尽 可 能 收集 过 去 和 现在 的 信息 。 这 些 信息 包括 受众 的 信息 、 当 前 业务 的 信息 、 现 
有 资源 的 信息 以 及 大 环境 的 信息 等 。 只 有 在 信息 充分 的 情况 下 ,才能 够 判断 未 来 的 趋势 ,从 
而 作出 正确 的 决策 ,所 以 网 站 的 建设 并 不 像 艺术 家 们 靠 自己 的 灵感 工作 ,而 是 基于 信息 的 。 

信息 的 来 源 并 不 单一 。 可 以 通过 问卷 调查 ,可 以 访问 相关 人 士 , 可 以 对 同类 网 站 做 一 
个 调研 报告 等 。 当 然 少不了 的 是 用 Google 和 百度 提供 的 站 长 分 析 工 具 , 查 看 相关 网 站 的 
运行 情况 ,从 而 让 自己 的 网 站 有 一 个 更 好 的 发 展 规划 。 如 果 网 站 项 目 是 对 旧 网 站 的 改版 ， 
那么 可 以 在 旧 网 站 中 肉 入 搜索 引擎 的 统计 代码 。 通 过 搜索 引擎 返回 的 统计 数据 ,能 够 发 
现 旧 网 站 的 优点 和 缺点 ,从 而 对 新 版 网 站 可 以 有 针对 性 地 进行 开发 。 


9.2 网 站 项 目的 设计 与 实现 


网 站 的 需求 分 析 是 为 了 让 开发 者 弄 清楚 要 建设 的 网 站 到 底 是 怎么 样 的 ,那么 设计 与 
实现 就 是 开始 将 想法 变 成 现实 的 步 又。 


921 确定 网 站 结构 


网 站 的 结构 也 叫 信息 架构 , 指 的 是 网 站 信息 的 组 织 形式 。 网 站 结构 就 如 同人 的 五 官 ， 
五 官 端正 的 人 至 少 不 会 太 难 看 。 一 个 网 站 信息 的 组 织 形式 直接 决定 了 网 站 用 户 的 使 用 体 
验 ,良好 的 网 站 结构 是 一 个 网 站 的 坚实 基础 。 


1. 按照 层级 组 织 网 站 


分 层 组 织 复杂 事物 几乎 是 人 类 最 基本 的 几 种 思维 方法 。 通 常 一 个 网 站 蕴涵 巨大 的 信 
息 量 ,少数 几 个 网 页 无 法 完全 呈现 ,有 时 候 甚 至 需要 几 十 到 几 百 个 网 页 。 这 好 比 一 本 巨 
著 , 如 果 所 有 内 容 都 是 杂乱 地 堆放 在 一 起 ,那么 读者 可 能 就 会 无 所 适 从 。 所 以 书籍 一 般 会 
提供 目录 ,有 需要 的 话 , 目 录 可 以 一 层 层 地 细 分 ,以 求 读者 能 够 快速 找到 想 要 的 内 容 。 如 
果 将 网 站 比 作 一 本 书 。 那 么 书本 的 前 言 或 者 摘要 就 是 网 站 首页 。 在 首页 一 般 提供 网 站 的 
概要 信息 。 如 果 网 站 的 内 容 特 别 多 ,那么 首页 内 容 就 要 经 过 挑选 ,把 最 重要 的 内 容 概要 放 
在 首页 。 书 本 的 章节 目录 就 相当 于 网 站 的 二 级 网 页 。 它 主要 提供 某 一 类 信息 的 概要 , 相 
当 于 书本 一 章 的 概要 。 而 书本 的 章节 内 容 就 相当 于 网 站 的 三 级 网 页 。 这 一 层 的 网 页 提供 
最 详细 的 信息 。 一 般 网 站 都 可 按照 这 三 级 安排 内 容 。 当 然 ,这 不 是 僵化 的 套路 。 在 做 具 
体 网 站 的 时 候 , 可 以 根据 内 容 具体 调整 层级 数量 。 

分 层 的 思想 是 人 类 的 基本 思维 之 一 ,是 相当 简单 的 。 但 是 具体 每 一 层 的 内 容 安排 却 
很 容易 犯错 ,过 多 的 分 类 和 过 深 的 层级 都 是 最 容易 出 现 的 错误 ,如 图 9-3 所 示 就 是 分 类 过 
多 的 情况 ,过 多 的 分 栏目 会 让 用 户 冷 落后 面 的 分 栏目 ,让 受众 在 视觉 上 产生 较 大 的 压力 。 

如 图 9-4 所 示 是 分 类 层次 太 深 的 情形 ,图 9-4 的 顶层 相当 简洁 ,但 是 用 户 很 容易 在 复杂 
的 层级 分 类 中 * 迷 路"。 作 为 用 户 , 当 然 想 尽快 获取 信息 。 如 果 用 户 必 须 打 开 一 层 又 一 层 的 链 
接 才 能 找到 真正 的 内 容 , 那 么 对 其 用 户 体验 就 会 产生 负面 影响 ,从 而 有 可 能 导致 用 户 的 离开 。 
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图 9-3 过 多 的 分 栏目 
分 栏目 1 分 栏目 2 (u) 
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图 9-4 层级 太 深 


一 般 建议 第 二 级 分 类 不 要 超过 6 个 ,层级 不 要 超过 4 层 。 如 果 是 分 类 栏目 过 多 ,可 以 
考虑 合并 某 些 分 类 。 例 如 数码 产品 ?栏目 和 * 电 脑 ? 栏 目 可 以 合并 为 “消费 电子 产品 ? 栏 
H; 如 果 层 级 过 深 , 那 么 可 以 考虑 将 某 些 子 类 取消 ,不 要 继续 细 分 。 对 某 些 网 站 可 能 是 不 
得 不 超过 一 般 标准 的 ,那么 可 以 采取 一 些 特殊 措施 尽量 降低 负面 效应 。 例 如 ,可 以 弱化 分 
类 ,强化 搜索 功能 ; 也 可 以 根据 用 户 访问 习惯 ,优先 列 出 用 户 访问 过 的 栏目 入 口 。 总 之 ， 
网 站 的 结构 关系 到 用 户 在 网 站 的 体验 ,是 设计 网 站 时 必须 优先 考虑 的 因素 。 


2. 内 容 组 织 


用 户 永远 是 为 了 网 站 的 内 容 而 访问 网 站 的 ,一 个 网 站 做 得 再 好 ,如 果 内 容 空 洞 无 物 ， 
那么 用 户 最 终 还 是 会 慢 慢 流失 的 。 在 刚 开始 建立 网 站 的 时 候 , 建 议 制作 一 份 内 容 清单 ,这 
样 就 能 知道 自己 已 有 哪些 内 容 , 未 来 需要 哪些 内 容 。 内 容 清单 整理 好 后 ,要 将 清单 和 网 站 
的 结构 对 照 , 看 内 容 是 否 能 够 按照 网 站 的 结构 来 组 织 。 可 以 按照 下 面 步骤 整理 内 容 清 单 。 

(1) 按 内 容 类 型 分 类 。 一 般 可 从 内 容 的 载体 分 类 ,如 文字 、 图 片 .音频 和 视频 等 ,每 一 
类 内 容 都 有 不 同 的 处 理 方式 ; 有 时 候 不 同类 型 的 内 容 需 要 混合 排版 出 现 ,这 些 都 要 在 内 
容 清单 上 明确 。 

(2) 按 主要 类 目 分 类 。 这 里 指 的 是 按照 网 站 第 一 级 分 类 栏目 划分 内 容 。 主 要 栏目 分 
类 不 宜 超 过 6 个 ,否则 很 难 在 网 页 上 安排 ,而 且 用 户 也 容易 遗漏 栏目 。 

(3) 按 次 级 类 目 分 类 。 除 了 按 大 类 划分 ,按照 网 站 的 次 级 目录 划分 相应 的 内 容 也 是 
必需 的 ,次 级 内 容 不 适宜 有 太 多 层级 。 

(4) 分 析 和 改进 层级 结构 。 内 容 组 织 有 时 候 不 能 适应 网 站 本 身 栏 目 结构 。 这 时 候 就 需 
要 对 内 容 进 行 取舍 ,或 者 对 网 站 栏目 结构 进行 调整 。 没 有 明确 的 守则 规定 要 如 何 调 整 ,这 完 
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全 取决 于 网 站 需求 分 析 , 看 哪 一 个 方案 更 有 利于 达到 最 终 的 目标 。 理 想 的 网 站 是 在 水 平和 
垂直 两 个 方向 的 类 目 达到 均衡 ,这 样 不 但 有 良好 的 用 户 体验 ,并 且 也 降低 了 开发 的 难度 。 


3. 微 结构 调整 


所 谓 的 微 结构 是 相对 于 网 站 的 大 框架 而 言 的 。 当 网 站 的 大 框架 定 下 来 后 ,网 站 的 外 
形 已 经 呼之欲出 ,但 “魔鬼 ”往往 隐藏 在 细节 当中 。 这 些 细节 如 果 处 理 好 了 ,不 但 能 提升 用 
户 的 体验 ,而 且 能 够 有 利于 网 站 的 后 续 发 展 。 

微 结构 一 般 不 会 影响 网 站 的 整体 , 它 主要 是 小 局 部 的 结构 调整 。 例 如 ,网 站 一 篇 长 文 
章 ( 小 说 等 ) ,如 果 只 在 一 个 网 页 显示 ,那么 用 户 从 头 开始 阅读 就 要 不 断 用 深 轮 滨 动 。 而 且 
一 旦 用 户 阅 读 到 后 面 ,又 突然 想 翻 查 前 面 的 内 容 ,还 得 深 动 多 次 才能 回 到 开头 。 其 实 这 个 
问题 很 好 解决 。 只 要 设置 锚 点 链接 ,让 用 户 单 击 直接 回 到 前 面 即 可 。 这 样 一 个 微小 的 结 
构 调整 能 够 极 大 地 方便 用 户 。 但 微 结构 调整 还 不 止 这 些 。 再 思考 一 下 ,长 文章 让 用 户 觉 
得 麻烦 的 原因 在 于 滚轮 不 能 随机 定位 。 要 看 文章 结尾 ,那么 就 必须 从 开始 不 停 滚动 经 过 
开头 和 中 间 的 内 容 。 试 想 调整 这 个 网 页 结构 ,将 长 文章 分 成 若干 部 分 ,然后 用 独立 的 网 页 
显示 。 同 一 篇 文章 的 不 同 部 分 是 通过 超 链接 联系 在 一 起 的 ,那么 用 户 在 浏览 文章 时 就 不 
用 频繁 滚动 滚轮 ,用 户 可 以 通过 超 链接 访问 文章 的 不 同 部 分 。 对 于 网 站 本 身 , 一 篇 文章 可 
以 增加 不 少 的 点 击 量 ,对 搜索 引擎 的 排名 也 是 相当 有 帮助 的 。 

相同 的 原理 也 可 以 套用 在 网 站 相册 等 微小 的 结构 里 。 如 果 选 择 在 一 个 网 页 一 次 加 载 
太 多 图 片 ,不 但 消耗 大 量 的 资源 ,用 户 也 要 花 很 多 时 间 等 待 图 片 的 加 载 。 总 之 ,设计 网 页 
的 时 候 要 考虑 到 方方面面 的 细节 结构 , 千 万 不 要 让 细节 般 掉 一 个 出 色 的 设计 。 
922 完善 网 站 的 内 容 

网 站 内 容 是 一 个 网 站 的 立足 之 本 。 当 规划 网 站 内 容 的 时 候 , 要 做 相关 的 文案 工作 。 
这 里 要 纠正 一 个 误区 , 那 就 是 用 静态 的 观点 看 待 网 站 内 容 。 虽 然 建立 网 站 前 ,内 容 收集 得 


越 多 越 好 ,但 也 不 能 毕 其 功 于 一 役 。 如 果 一 个 网 站 的 内 容 长 期 不 更 新 ,是 不 可 能 留 住 用 户 
的 。 所 以 要 用 动态 的 眼光 规划 和 完善 内 容 。 网 站 的 文案 工作 要 注意 以 下 几 方 面 。 


1. 内 容 设 计 


网 站 内 容 某 种 程度 不 是 越 多 越 好 ,因为 这 个 世界 很 多 信息 都 是 互相 冲突 的 。 如 果 网 
站 同时 提供 互相 矛盾 的 信息 ,那么 可 能 会 对 用 户 造成 困惑 。 这 和 很 多 报纸 和 杂志 一 样 , 它 
们 都 有 固定 的 用 户 群 ,很 多 时 候 用 户 是 带 着 自 有 的 观点 去 选择 的 。“ 道 不 同 ,不 相 为 谋 ”， 
一 个 群体 的 形成 往往 是 基于 一 些 共同 的 理念 。 那 么 网 站 的 用 户 群 也 是 。 为 什么 这 些 用 户 
聚集 在 这 个 网 站 ,而 不 是 其 他 网 站 呢 ? 网 站 的 风格 是 次 要 的 ,重要 的 是 网 站 本 身 内 容 的 偏 
好 。 正 如 * 爱 范 儿 ?网 站 是 苹果 粉丝 的 集中 地 ,而 “机 锋 网 ?是 安 卓 粉 丝 的 论坛 , wpxap 则 
是 微软 粉丝 的 聚会 点 。 这 三 个 网 站 虽然 都 是 号 称 包罗 各 种 数码 产品 信息 ,但 是 实际 上 用 
户 群体 的 倾向 决定 了 其 内 容 选 择 的 倾向 。 

因此 ,在 规划 网 站 内 容 时 一 定 要 引入 内 容 设 计 的 概念 。 网 站 内 容 如 果 只 是 简单 的 堆积 ， 
提供 所 有 的 信息 ,就 是 无 设计 的 状态 。 这 样 不 但 不 能 吸引 所 有 的 用 户 , 相 反 可 能 得 罪 所 有 的 


用 户 , 最 终 会 被 定性 为 “不 专业 ”。 要 避免 这 种 情况 ,一 定 要 根据 核心 受众 来 决定 内 容 选 取 的 
倾向 。 关 于 受众 分 析 前 面 的 章节 已 经 叙述 。 当 然 ,这 里 说 以 核心 受众 的 价值 观 为 纲 ,并 不 是 
说 无 节制 地 讨好 受众 ,而 是 通过 内 容 的 筛选 设计 ,让 核心 受众 能 够 快速 找到 他 们 想 看 的 内 容 。 
在 内 容 设计 方面 ,除了 提供 核心 受众 想 要 的 内 容 外 ,还 要 对 不 同 内 容 的 重要 性 进行 评 
估 。 能 引起 用 户 强烈 兴趣 的 内 容 就 置 于 "聚光灯 ”下 , 尽 可 能 减少 用 户 寻 找 和 甄别 信息 的 工作 。 


2. 写作 技巧 


本 书 不 是 关于 写作 的 教材 ,所 以 无 意 在 这 个 问题 说 太 多 。 假 设 本 书 读者 已 经 能 够 具 
备 基 本 的 写作 能 力 ,能 够 熟练 清晰 地 表达 自己 的 观点 或 者 组 织 相关 的 内 容 。 但 在 网 站 文 
案 写作 时 也 有 一 些 要 特别 注意 的 地 方 , 包 括 以 下 几 方 面 。 

(1) 创建 准确 、 强 有 力 的 标题 。 

(2) 写 简 短 的 句子 。 

(3) 避免 使 用 长 段落 。 

(4) 传达 一 致 的 信息 和 语气 。 

(5) 适度 使 用 讨好 受众 的 言辞 。 

3. 关键 词 

网 站 的 关键 词 非常 重要 。 现 在 用 户 在 互联 网 落 茫 的 网 站 中 怎样 才能 找到 自己 的 网 站 
呢 ? 大 部 分 都 是 通过 搜索 引擎 搜索 关键 词 , 然 后 被 引导 到 相关 网 站 的 。 如 果 说 网 站 的 关 
键 词 决定 了 网 站 的 初始 排 位 ,那么 内 容 的 关键 词 就 决定 网 站 能 和 否 在 众多 搜索 结果 中 突围 
而 出 了 。 在 内 容 写作 上 ,应 该 倾向 使 用 容易 被 用 户 搜索 的 词语 。 因 为 搜索 引擎 的 “ 怜 虫 ” 
程序 会 索引 网 站 的 所 有 内 容 , 如 果 文 章 中 就 有 很 多 用 户 搜索 的 关键 词 ,那么 文章 本 身 就 容 
易 命 中 。 而 网 站 文章 访问 的 人 数 多 了 ,能够 提升 网 站 在 搜索 引擎 的 排名 ,从 而 更 容易 获得 
新 用 户 。 这 是 一 个 良性 循环 。 

当然 任何 事情 都 是 过 犹 不 及 ,对 于 关键 词 出 现 的 频率 是 有 考究 的 。 关 于 这 个 问题 在 
搜索 引擎 优化 的 相关 书籍 有 详细 介绍 。 这 里 只 要 对 用 词 稍 加 注意 ,使 用 相关 的 热门 搜索 
词 即 可 ,不 要 滥用 ,更 不 要 无 意义 地 堆砌 。 


4. 寻找 内 容 


网 站 的 生命 在 于 不 断 更 新 的 内 容 , 如 果 停 止 更 新 ,网 站 很 快 就 会 消亡 。 为 了 保持 内 容 
可 以 定期 更 新 ,必须 寻找 稳定 的 信息 源 。 根 据 网 站 的 主题 不 同 ,信息 源 也 不 同 ,但 一 个 网 
站 可 以 有 不 同 的 信息 源 。 信 息 源 可 以 分 为 下 面 几 类 。 

(1) 自身 创造 信息 。 这 是 最 常见 的 一 种 网 站 内 容 获取 模式 。 网 站 通过 自身 采集 、 加 
工 和 出 版 原创 内 容 , 如 新 浪 就 是 走 的 这 条 路 。 为 了 创造 原创 内 容 , 网 站 需要 有 专门 的 人 员 
负责 内 容 创造 ,如 记者 、 编 辑 等 。 这 样 的 内 容 往往 原创 性 较 强 ,能够 长 期 吸引 用 户 。 但 缺 
点 是 成 本 相对 高 昂 ,而 且 很 难 大 量 产生 高 质量 的 原创 内 容 。 

(2) 收集 其 他 网 站 信息 。 这 种 类 型 的 信息 源 相当 于 信息 的 聚合 器 ,能 把 优秀 的 内 容 
搬 到 自己 的 网 站 ,而 且 无 须 花费 太 高 的 成 本 。 但 这 样 的 信息 源 没有 原创 性 ,很 难 长 期 留 住 
用 户 。 而 且 内 容 聚 合 器 无 法 形成 竞争 门槛 ,有 时 候 还 涉及 版 权 问 题 。 
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(3) 自 媒 体 。 这 是 SNS 兴起 后 的 内 容 产生 方式 。 网 站 本 身 不 产生 内 容 。 网 站 只 是 
提供 一 个 社交 平台 ,让 用 户 自己 产生 内 容 。 这 种 方式 既 有 原创 性 又 可 以 低 成 本 创造 内 容 。 
但 这 种 方式 产生 的 内 容 一 般 具 有 草根 特性 ,欠缺 专业 性 和 权威 性 。 

上 述 三 种 信息 源 可 以 混合 使 用 ,它们 之 间 并 没有 直接 冲突 。 但 作为 一 个 构建 中 的 网 
站 ,必须 分 好 主 次 ,网 站 营运 时 才能 有 所 倚重 。 

923 确定 设计 方案 

当 内 容 与 网 站 结构 都 调整 完毕 ,就 可 以 开始 设计 具体 的 网 站 了 。 这 通常 是 美工 的 工 
作 , 但 随 着 网 页 前 端 越 来 越 复杂 ,程序 员 要 更 多 地 参与 到 相关 的 工作 中 ,这 个 阶段 的 工作 
目标 是 得 出 网 站 各 级 网 页 的 草图 。 

网 站 的 草图 定稿 前 必须 经 过 反复 的 讨论 。 有 时 候 做 一 个 方案 是 不 够 的 ,可 能 需要 做 
多 个 方案 然后 对 比 讨论 。 网 站 的 草图 一 般 用 Photoshop 或 者 是 Fireworks 等 图 像 处 理 软 
件 制作 ; 对 于 某 些 比较 简单 的 网 页 甚至 可 以 将 草图 直接 切片 成 网 页 。 对 大 多 数 网 页 不 推 
荐 直接 切片 做 。 因 为 一 般 图 片 文 件 体积 比较 大 ,切片 出 来 的 网 页 往往 优化 程度 很 低 , 而 且 
适应 性 很 差 。 比 较 通 用 的 做 法 是 根据 草图 的 效果 ,用 XHTML 和 CSS 准确 还 原 。 其 中 草 
图 很 多 图 层 都 能 作为 网 页 的 素材 使 用 。 

草图 或 者 效果 图 已 经 是 网 站 设计 的 最 后 一 步 。 虽 然 经 过 前 面 若干 步骤 的 调研 分 析 , 但 
最 终 的 效果 图 还 需 甲 方 (出 资方 ) 亲 自 确认 ,作为 开发 方 应 该 向 甲 方 解析 草图 的 各 个 细节 , 确 
保甲 方 理解 并 同意 这 个 设计 方案 。 如 果 甲 方 对 方案 提出 异议 ,那么 开发 方 可 以 用 自己 掌握 
的 资料 跟 甲 方 沟通 。 如 果 甲 方 坚 持 已 见 ,那么 应 当 修改 设计 方案 以 满足 甲 方 的 意愿 。 这 里 
涉及 双方 的 交流 沟通 ,但 要 坚持 的 原则 是 不 能 将 方案 的 设计 权 交 给 甲 方 ,否则 最 后 可 能 造成 
非常 糟糕 的 结果 。 当 双方 对 设计 方案 达成 一 致 时 ,最 好 签 一 份 协议 同意 以 后 的 工作 就 是 转 
绕 该 方案 进行 。 开 发 方 负责 实施 该 方案 ,而 没有 特殊 情况 出 资方 不 得 提出 变动 方案 的 要 求 (如 
果 肯 付 额外 费用 则 可 以 考虑 ) 。 明 确 双方 的 权利 和 义务 是 以 后 工作 顺利 进行 的 最 重要 保证 。 


924 网 站 的 实现 


如 何 制 作 一 个 网 站 是 本 书 的 主要 内 容 。 网 站 实现 是 前 端 工程 师 的 工作 。 收 到 确认 过 
的 设计 方案 后 ,要 百 分 百 地 实现 设计 方案 的 效果 。 关 于 网 站 实现 的 技术 ,本 书 前 面 的 章节 
已 经 做 了 详细 叙述 ,这 里 只 列 出 一 些 实现 过 程 要 注意 的 问题 。 


1. 优化 代码 结构 


对 于 正规 的 网 站 项 目 , 一 般 极 少 使 用 可 视 化 的 开发 工具 。 在 书写 代码 时 注意 维护 好 代码 
的 结构 。 例 如 ,XHTML 符 套 标记 要 做 好 缩 进 , 这 样 不 但 使 代码 更 加 整洁 ,也 让 代码 更 好 维护 。 
在 开发 网 页 时 ,免不了 使 用 XHTML.CSS 和 JavaScript。 这 三 者 互相 配合 构成 网 页 最 终 的 效 
果 。 然 而 这 三 种 代码 差异 较 大 却 又 不 得 不 混合 搭配 使 用 ,那么 书写 代码 时 应 该 尽 可 能 减少 它 
们 互相 混杂 的 情况 。 例 如 ,要 用 CSS 的 时 候 ,尽量 少 用 内 联 的 方式 ,因为 这 样 会 让 XHTML 
本 身 看 起 来 很 复杂 ; 还 有 JavaScript 代码 理论 上 也 能 用 Script 标记 放 在 XHTML 文档 的 任 
意 地 方 ,但 还 是 建议 统一 放 在 头 部 或 者 独立 的 文件 中 ,这 也 是 避免 代码 混乱 的 技巧 。 

总 之 ,希望 代码 能 够 整洁 有 条 理 . 每 个 模块 都 能 独立 成 段 。 这样 不 但 有 利于 自己 书 


写 和 维护 代码 ,也 有 利于 团队 间 的 分 工 合作 。 
2. 注意 命名 规范 


在 软件 开发 领域 ,代码 中 的 命名 规范 往往 是 区 分 菜鸟 和 老手 的 第 一 条 标准 。 当 然 , 实 
际 上 代码 中 的 变量 或 者 id 命名 只 是 一 种 约定 ,并 不 是 硬性 规定 。 初 学 者 往往 喜欢 用 一 些 
不 规范 的 命名 ,这 归根 结 底 是 因为 新 手 没有 做 过 更 复杂 的 项 目 。 当 一 个 项 目 上 了 规模 后 ， 
如 果 命 名 混乱 ,会 极 大 地 增加 阅读 的 难度 .从 而 增加 项 目 开 发 的 成 本 。 在 网 站 项 目 , 要 自 
己 命 名 的 地 方 也 不 少 ,如 id, CSS 规则 的 名 字 JavaScript 的 变量 等 。 可 以 借用 软件 开发 
的 变量 命名 方式 ,也 可 以 套用 公司 内 部 的 命名 规范 ,并且 大 多 数 时 候 后 者 优先 。 


3. 做 好 代码 注释 
对 于 复杂 的 网 站 项 目 ,再 有 经 验 的 开发 者 也 很 难 马 上 找到 代码 的 主 脉络 。 现 在 开发 
都 是 团队 开发 ,因此 要 养 成 团队 合作 的 习惯 。 自 己 写 的 代码 很 多 时 候 不 仅仅 是 自己 看 ,还 


要 给 团队 其 他 成 员 看 。 为 了 使 别人 尽快 看 懂 自 己 的 代码 ,良好 的 注释 习惯 是 必须 的 。 而 
且 恰 当 的 注释 有 时 可 以 提醒 自己 ,让 开发 思路 保持 连贯 。 


4. 注意 CSS 规则 的 设计 


很 多 开发 者 可 以 纯熟 地 运用 CSS 实现 各 种 效果 。 然 而 ,实现 指定 效果 只 是 最 基本 的 
要 求 。 一 个 好 的 前 端 工程 师 用 CSS 的 时 候 还 会 考究 CSS 规则 的 设计 。 对 于 一 般 人 ,CSS 
规则 常常 是 想到 一 个 就 做 一 个 ,到 最 后 元 余 的 规则 会 让 自己 陷入 困境 。 更 要 命 的 是 这 会 
对 以 后 网 站 的 修改 造成 极 大 的 困难 。 好 的 设计 师 会 思考 一 条 规则 的 使 用 范围 .被 复 用 的 
可 能 性 ,然后 利用 规则 继承 合并 等 特性 ,让 所 有 规则 优雅 而 高 效 地 运作 。 


5. 提高 代码 的 复 用 率 


网 站 项 目 相对 软件 项 目 有 较 强 的 容错 性 ,而 且 在 高 速 网 络 普及 的 今天 ,网 页 加 载 速度 
也 相差 无 几 。 但 有 经 验 的 工程 师 总 是 能 够 写 更 少 的 代码 ,做 更 多 的 事情 。 无 论 是 CSS 规 
则 还 是 JavaScript 代码 ,都 要 想 一 下 现在 所 做 的 能 否 在 以 后 的 网 页 派 上 用 场 。 带 着 这 样 
一 种 理念 ,那么 很 多 的 工作 就 能 够 重复 使 用 ,让 网 站 更 加 高 效 ,也 降低 了 开发 成 本 。 


6. 留 下 详细 的 开发 文档 


对 于 软件 项 目 , 开 发 文档 是 十 分 重要 的 。 开 发 文档 说 明了 整个 项 目的 所 有 细节 ,程序 
员 除 了 写 代 码 , 最 重要 的 一 项 工作 就 是 写 开发 文档 。 网 站 项 目 虽 然 不 像 软件 系统 有 那么 
复杂 的 逻辑 结构 ,但 对 于 开发 文档 的 要 求 是 一 致 的 。 试 想 一 个 网 页 多 达 数 十 个 CSS 规 
则 ,没有 相关 的 文档 说 明 就 很 难 弄 清 所 有 细节 了 ,而 接手 下 一 步 工 作 的 人 也 无 从 下 手 。 


925 网 站 的 测试 和 发 布 


经 过 艰苦 的 开发 阶段 网 站 已 经 基本 准备 就 绪 , 但 作为 开发 方 的 工作 还 远 没 有 结束 。 
正如 其 他 产品 ,在 上 市 前 一 般 还 要 经 过 品质 检测 的 工序 ,以 确保 上 市 的 产品 没有 问题 。 网 
站 开发 也 是 如 此 ,在 上 线 运行 前 必须 做 好 相关 的 测试 。 否 则 ,上 线 后 出 现 问题 将 会 极 大 地 
影响 用 户 对 网 站 的 评价 。 
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1. 性 能 测试 

(1) 速度 测试 。 网 站 速度 和 用 户 体 验 有 着 密切 的 关系 。 从 网 站 开发 的 角度 可 以 采用 
一 些 技巧 提升 用 户 访问 网 站 的 速度 。 例 如 ,对 图 片 和 视频 进行 压缩 ,在 失真 不 是 太 严重 的 
情况 下 能 够 有 效 地 提升 用 户 访问 的 速度 。 

(2) 负载 测试 。 这 种 测试 主要 是 看 网 站 能 够 承受 多 少 用 户 的 访问 ,如 果 负 载 能 力 过 
小 ,可 以 考虑 增加 服务 器 的 投入 。 

(3) 压力 测试 。 压 力 测试 是 测试 系统 的 限制 和 故障 恢复 能 力 , 也 就 是 测试 网 站 会 不 
会 崩溃 ,或 者 在 何 种 条 件 下 容易 崩溃 。 

2. 安全 性 测试 

它 需要 对 网 站 的 安全 性 (服务 器 安全 、 脚 本 安全 )、 可 能 有 的 漏洞 进行 测试 ,包括 攻击 
性 测试 、 错 误 性 测试 。 对 服务 器 应 用 程序 数据、 服务 器 、 网 络 、 防 火 墙 等 进行 测试 。 

3. 基本 测试 

基本 测试 包括 色彩 的 搭配 、 连 接 的 正确 性 、 导 航 的 方便 和 正确 、CSS 应 用 的 统一 性 等 。 

4. 网 站 优化 测试 


好 的 网 站 是 看 它 是 否 经 过 搜索 引擎 优化 ,网 站 的 架构 、 网 页 的 栏目 与 静态 情况 等 。 


9.3 网 站 项 目的 运 维 


931 确定 网 站 的 盈利 模式 


任何 商业 网 站 最 终 的 目标 都 是 实现 盈利 。 互 联网 从 Web 1. 0 时 代 到 现在 Web 2. 0 时 

代 , 涌 现 过 无 数 好 的 创意 。 基 于 这 些 创 意 出 现 过 无 数 有 创意 的 网 站 ,但 无 论 什么 网 站 , 列 利 

模式 这 个 古老 的 话题 是 始终 绕 不 过 的 。 有 人 说 互联 网 经 济 就 是 注意 力 经 济 , 也 就 是 说 当 网 

站 吸引 了 注意 力 就 能 够 转换 成 经 济 利益 。 这 人 句 话 暗示 了 网 站 主要 的 盈利 模式 是 广告 。 确 

实 , 广 告 是 大 多 数 网 站 的 一 利 模式 。 从 图 9-5 中 可 以 看 出 著名 互联 网 公司 的 主要 营 收 对 比 。 
2011 年 中 国 互联 网 细 分 行业 上 市 公司 营 收 同比 增长 率 

网 络 视频 (优酷 、 土 豆 等 ) 

网 络 社区 (人 人 、 世 纪 佳缘 ) 

综合 (腾讯 、 百 度 、 新 浪 等) 

行业 网 站 (搜房 、 易 车 等 ) 

电信 增值 (掌上 灵通 、 网 秦 等 ) 

网 络 游戏 (完美 世界 、 畅 游 等) 

电子 商务 (阿里 巴巴 、 当 当 等 ) 

0% 50% 100% 


CVSource,2012.04 www.ChinaVenture.com.cn 


图 9-5 互联 网 公司 的 营 收 情况 


而 广告 为 主 的 方式 注定 了 大 多 数 网 站 采用 的 是 免费 服务 的 形式 。 甚 至 有 人 称 免费 是 
互联 网 的 其 中 一 大 特征 。 互 联网 免费 服务 和 收费 服务 对 比如 图 9-6 所 示 。 
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广告 付费 
图 9-6 互联 网 广告 和 付费 对 比 


上 述 只 是 说 明了 广告 收入 是 主要 至 利 模式 的 事实 。 互 联网 本 身 的 一 利 模 式 还 是 相当 
丰富 的 。 常 见 的 网 站 收入 如 下 。 


hd 


比较 狭义 的 是 指 文字 、 图 片 视频 等 广告 信息 ,放置 在 网 站 的 特定 位 置 给 予 展示 ,并 通 
常 有 链接 到 相关 产品 的 详情 页 面 。 这 种 方式 基本 上 是 通用 的 ,适用 于 绝 大 多 数 网 站 ,价格 
受到 网 站 的 流量 、 用 户 群 的 精准 度 等 方面 的 影响 。 


2. 会 员 费 


此 类 收费 也 同样 有 对 应 的 需求 资源 ,例如 ,一 个 下 载 网 站 ,如果 采用 会 员 制 的 方式 , 那 
么 必须 有 足够 的 吸引 人 的 下 载 资源 ,常见 的 有 特殊 电影 下 载 站 、 百 度 文库 一 类 的 文档 下 
载 。 而 诸如 B2B 的 网 站 ,也 要 严格 区 分 会 员 与 非 会 员 , 申 请 特殊 会 员 之 后 ,是 否 享 受到 了 
他 们 迫切 需要 的 东西 ,如 果 网 站 的 资源 非常 稀缺 ,其 他 站 点 难以 复制 ,那么 会 员 制 是 比较 
值得 推荐 的 ,管理 起 来 相对 比较 容易 和 简单 。 


3. 搜索 排名 


其 前 提 是 各 类 信息 和 资源 都 相对 丰富 ,内 部 竞争 较 大 ,例如 ,平台 上 提供 无 烟煤 的 有 
几 千 上 万 家 ,那么 这 样 的 情况 下 ,搜索 排名 服务 就 很 有 必要 了 。 


4. 企业 黄页 
和 搜索 排名 类 似 , 都 需要 庞大 的 数据 库 和 较 强 的 竞争 力 以 及 以 流量 为 前 提 。 
5. 交易 佣金 


适用 于 支持 在 线 支付 的 C2C 商城 类 ,更 适用 于 某 些 网 站 兼 做 交易 中 间 担 保 的 大 宗 
B2B 类 ,这 两 类 网 站 有 一 个 共同 的 性 质 , 就 是 需要 网 站 做 诚信 担保 ,不 管 是 在 产品 质量 还 
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是 其 他 所 涉及 的 诸多 方面 ,网 站 方 需要 对 交易 担保 ,如 有 出 现 违约 ,网 站 要 对 损失 方 承担 
赔偿 ,当然 ,对 责任 的 追究 由 网 站 自己 协调 ,但 是 给 交易 双方 提供 了 有 力 保证 ,只 要 顺利 完 
成 ,收取 一 定 的 佣金 ,是 完全 可 行 的 。 


6. 线 上 咨询 


这 类 服务 需要 很 强 的 专业 技能 ,同时 要 承担 其 咨询 内 容 的 责任 ,如 法 律 咨询 .医务 咨询 
等 ,这 种 收费 方式 暂时 可 能 还 不 是 很 成 熟 ,需要 谨慎 。 另 外 网 校 一 类 的 远程 教育 也 属于 这 项 。 


7. 线 下 合作 


如 B2B 类 ,可 以 和 相关 协会 和 机 构 联合 举办 行业 会 议 或 展会 ,促进 行业 的 企业 发 展 ， 
这 对 一 些小 企业 来 讲 , 名 额 上 也 许 不 是 那么 容易 拿 到 ,网 站 可 以 帮助 企业 参加 。 


8. 移动 增值 服务 


首先 了 解 增值 服务 的 含义 ,经 营 网 站 也 可 以 参考 ,划分 免费 和 收费 项 目 ,收费 项 目 再 
根据 性 质 分 块 ,用 户 根据 需求 自主 选择 ,对 用 户 来 讲 更 加 灵活 ,只 是 对 网 站 来 讲 , 管 理 起 来 
相对 要 复杂 一 些 。 假 如 发 布 了 一 条 供应 某 款 服 饰 的 信息 , 当 有 登录 用 户 浏览 这 条 信息 时 ， 
则 用 短信 的 方式 告知 供应 商 并 列 出 其 联系 方式 ,当然 这 里 供应 商 也 可 以 根据 需要 设置 济 
览 即 通知 或 是 有 其 他 操作 时 通知 ,这 里 只 是 提供 一 个 思路 。 还 有 如 特殊 道具 (置顶 、 变 色 
醒目 等 ) .积分 体系 等 多 种 类 型 。 

盘 利 模式 可 以 选择 多 种 模式 结合 ,但 要 注意 理 顺 各 种 模式 之 间 的 关系 ,否则 可 能 会 车 
起 用 户 的 负面 情绪 。 


932 网 站 的 推广 


网 站 推广 是 一 个 相当 大 的 课题 ,详细 讲 的 话 需要 另外 一 本 书 的 篇 章 。 网 站 推广 的 目 
的 在 于 让 别人 认识 自己 的 网 站 ,进而 成 为 网 站 的 用 户 。 这 对 刚 营运 的 网 站 是 至 关 重要 的 。 
网 站 推广 可 以 分 为 线 上 推广 和 线 下 推广 。 


1. 线 上 推广 


线 上 推广 可 以 有 多 种 途径 。 其 中 最 重要 的 是 要 提升 网 站 在 搜索 引擎 中 的 排名 。 刚 开 
始 营运 的 网 站 肯定 是 默默 无 名 的 ,别人 也 不 可 能 知道 网 站 的 地 址 。 搜 索引 擎 可 以 将 潜在 
的 用 户 引 流 到 网 站 。 但 是 如 果 网 站 的 排名 较 低 ,用 户 也 一 般 不 会 关注 到 ,因为 很 少 用 户 会 
在 搜索 引擎 翻 几 十 页 去 找 网 站 。 据 统计 一 般 排 在 搜索 结果 前 三 页 的 才 有 较 大 的 机 会 被 用 
户 访问 到 。 搜 索引 擎 根据 网 站 的 访问 量 不 断 调 整 搜索 结果 的 排名 ,一 般 访问 量 大 的 网 站 
会 排 在 前 面 。 可 是 对 新 生 的 网 站 开始 的 时 候 不 可 能 有 太 多 的 访问 量 。 那 么 可 以 通过 搜索 
引擎 优化 (SEO) 去 尽 可 能 提升 排名 ,通过 积累 的 第 一 批 用 户 慢 慢 提升 。 关 于 SEO 读者 们 
可 以 参考 相关 书籍 ,也 可 以 找 相关 SEO 公司 帮 有 网 站 推广 。 

除了 搜索 引擎 外 ,可 以 选择 在 知名 网 站 打 广 告 。 广 告 平 台 的 选择 要 慎重 ,因为 如 果 广 
告 投放 平台 的 用 户 和 自己 网 站 的 用 户 风 马 牛 不 相 及 ,那么 最 终 的 转化 率 也 会 低 得 可 怜 。 
可 是 如 果 广 告 平 台 的 用 户 和 自己 网 站 的 用 户 完 全 重合 ,那么 广告 平台 可 能 会 拒绝 投放 广 
告 , 因 为 所 有 网 站 都 不 希望 自己 的 用 户 流 失 到 竞争 对 手 的 手 里 。 可 以 挑选 用 户 群 体 相似 ， 
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但 业务 和 自己 网 站 不 冲突 的 平台 投放 广告 。 
除 此 ,还 可 以 利用 社交 网 络 (SNS) 平 台 推广 。 例 如 ,可 以 在 微 博 发 表 留 言 ,在 论坛 发 
帖子 ,在 微 信 发 起 点 赞 活动 等 。 这 是 比较 流行 而 且 成 本 不 高 的 推广 手段 。 


2. 线 下 推广 


线 下 推广 就 是 脱离 网 络 ,用 传统 的 方式 推广 网 站 ,包括 电视 广告 .平面 广告 户外 广告 
等 。 千 万 别 小 看 传统 推广 方式 的 力量 。 很 多 时 候 , 看 起 来 老 掉 牙 的 推广 方式 往往 比 时 化 
的 推广 方式 能 收 到 更 好 的 效果 。 


933 网 站 相关 数据 的 分 析 


网 站 上 线 运营 后 ,最 关心 的 问题 是 用 户 觉 得 网 站 怎么 样 。 可 惜 的 是 ,在 大 多 数 情况 下 
户 不 会 主动 告知 相关 信息 的 。 当 然 也 会 有 热心 的 用 户 提出 意见 和 建议 的 ,但 数据 样本 
太 小 ,几乎 无 法 评估 整体 的 运行 情况 。 这 时 候 就 需要 相关 的 工具 辅助 分 析 网 站 用 户 的 访 
问 行为 。Google 和 百度 这 两 大 搜索 引擎 都 提供 相关 的 工具 。 这 里 以 百度 统计 为 例 。 

首先 需要 去 百度 统计 注册 一 个 账号 ,然后 按照 百度 统计 的 要 求 将 百度 统计 的 统计 代 
码 加 入 自己 的 网 站 。 这 两 步 做 好 以 后 百度 就 会 开始 收集 网 站 访问 用 户 的 行为 ,并 形成 统 
计 图 表 供 站 长 分 析 , 如 图 9-7 所 示 。 


百度 统计 除了 能 告知 网 站 访问 量 的 变化 趋势 外 ,还 可 以 提供 有 价值 的 数据 ,如 用 户 年 
龄 构成 .职业 ` 入 口 页 面 . 访 问 时 长 \ 点 击 热点 等 。 可 以 通过 这 些 数据 分 析 网 站 的 运营 情 
况 , 从 而 指导 下 一 步 的 决策 。 


9.4 综合 案例 


本 节 将 结合 一 个 案例 说 明 网 站 项 目 构建 和 运 维 的 整个 过 程 。 读 者 可 以 结合 书本 的 素 
材 按照 正确 流程 完成 本 项 目 。 
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941 需求 分 析 
1. 选 题 


本 案例 主要 是 做 一 个 IT 类 的 资讯 网 站 ,以 数码 科技 新 闻 为 主 。 选 题 主要 考虑 是 作 
为 参考 案例 ,不 宜 挑 选 过 于 复杂 的 题目 ,其 目的 是 让 读者 体验 网 站 项 目 开 发 的 整个 流程 。 


2. 受众 分 析 


案例 网 站 主要 提供 IT 数码 资讯 ,目标 用 户 是 15 一 25 岁 的 青少年 群体 。 该 群体 大 多 
数 是 没有 独立 经 济 能 力 的 学 生 。 他 们 比较 关心 消费 电子 产品 ,如 智能 手机 、 平 板 电 脑 、 随 
身 播放 器 等 。 这 个 年 龄 段 的 用 户 比 较 容 易 接受 新 事物 ,喜欢 时 艇 新 颖 的 产品 ,但 经 济 能 力 
又 决定 了 他 们 追求 性 价 比 高 的 产品 。 因 此 ,本 网 站 提供 的 IT 数码 类 新 闻 要 迎合 这 个 群 


3. 参考 对 象 


同类 的 网 站 不 少 ,有 些 是 作为 门户 网 站 的 其 中 一 个 分 栏目 整合 。 独 立 的 IT 类 网 站 国内 
有 CNBeta(http: / / www. cnbeta. com) ,国外 的 有 Engadget(http://www. engadget. com), E 
述 两 个 是 比较 大 型 的 网 站 ,小 型 值得 参考 的 是 WPDang(http: / / www. wpdang. com) 。 这 些 
网 站 都 是 以 新 闻 发 布 , 用 户 讨论 为 核心 业务 ,是 案例 网 站 的 重要 参考 对 象 。 


942 开发 流程 
1. 流程 概述 


网 站 开发 的 详细 流程 如 图 9-8 所 示 ,网 站 开发 有 着 复杂 的 流程 ,在 开发 前 最 好 整理 相 
关 资 料 ,并 写 好 网 站 规划 书 。 读 者 可 按照 以 下 内 容 建 议 写 出 自己 的 网 站 规划 书 。 

(1) 建设 网 站 前 的 市 场 分 析 

如 果 创 意 新 颖 ,那么 市 场 潜力 会 比较 大 ,因为 没有 竞争 对 手 ; 如 果 想 进入 已 经 成 熟 的 
市 场 , 那 就 意味 着 更 大 的 难度 ,这 就 需要 对 竞争 对 手 进 行 客观 的 分 析 。 

(2) 建设 网 站 的 目的 及 功能 定位 

这 部 分 内 容 在 选 题 的 时 候 已 经 讨论 过 。 但 选 题 时 更 多 的 是 头脑 中 的 思考 ,在 网 站 规 
划 书 里 面 则 要 将 这 一 部 分 形成 书面 内 容 。 

(3) 网 站 技术 解决 方案 

前 面 两 步 都 是 从 市 场 角度 考虑 。 一 般 情况 只 有 市 场 前 景 的 网 站 才 会 有 实现 的 价值 , 当 
市 场 考虑 充分 后 , 才 进 入 技术 讨论 阶段 。 做 网 站 有 很 多 技术 ,而 且 每 种 技术 都 有 自己 的 优势 
和 缺点 。 除 了 考虑 技术 的 先进 性 外 ,还 必须 考虑 成 本 。 也 许 某 种 技术 非常 好 ,但 因 经 费 有 限 
而 最 终 被 否决 。 此 外 就 是 网 站 功能 的 考虑 。 一 般 在 技术 解决 方案 中 要 和 弄 清楚 以 下 几 个 问题 。 

O 采用 自 建 服务 器 ,还 是 租用 虚拟 主机 。 

© 选择 操作 系统 ,用 UNIX, Linux 还 是 Windows 2000/NT。 分 析 投 入 成 本 、 功 能 、 
开发 .稳定 性 和 安全 性 等 。 
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(总 裁 、 运 营 总 监 、 市 场 总 监 、 技 术 总 监 ) 


整体 设计 开发 文档 
(产品 经 理 ) 


H 
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图 9-8 网 站 开发 流程 
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一 一 一 | 网 站 程序 嵌入 


| (网 站 程序 工程 师 ) 


通过 产品 (网 站 程序 工程 师 主 持 ) 
功能 审核 (产品 经 理 审核 ) 


部 


(全 体内 部 人 员 测试 D 五 | 产品 F 
BAMEN <C ENA iia 
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产品 二 期 开发 报告 
(产品 经 理 做 二 期 开发 分 析 ) 


产品 功能 Bug 报 告 


产品 正式 上 线 


网 站 项 目 一 期 开发 结束 
图 9-8( 续 ) 


© 采用 系统 性 的 解决 方案 (如 IBM HP) 等 公司 提供 的 企业 上 网 方案 .电子 商务 解决 
方案 ,还 是 自己 开发 。 

@ 网 站 安全 性 措施 , 防 黑 、 防 病毒 方案 。 

© 相关 程序 开发 ,如 网 页 程序 ASP、JSP、CGI. 数 据 库 程序 等 。 

(4) 网 站 内 容 规 划 

根据 网 站 的 目的 和 功能 规划 网 站 内 容 ,一般 企业 网 站 应 包括 : 公司 简介 、 产 品 介 绍 、 
服务 内 容 、 价 格 信息 ,联系 方式 、 网 上 订单 等 基本 内 容 。 如 果 是 电子 商务 类 网 站 ,要 有 查询 
商品 .购物 车 支付 系统 等 内 容 。 如 果 网 站 栏目 比较 多 , 则 考虑 采用 网 站 编程 专人 负责 
关内 容 。 注 意 , 网 站 内 容 是 网 站 吸引 浏览 者 最 重要 的 因素 ,无 内 容 或 不 实用 的 信息 不 会 吸 
引 匆 匆 浏 览 的 访客 。 可 事先 对 人 们 希望 阅读 的 信息 进行 调查 ,并 在 网 站 发 布 后 调查 人 们 
对 网 站 内 容 的 满意 度 , 以 便 及 时 调整 网 站 内 容 。 

(5) 网 页 设计 

严格 上 说 ,这 一 部 分 才 是 本 书 要 解决 的 问题 。 也 许 读者 会 失望 ,学 了 这 么 久 原 来 只 是 
解决 这 么 一 个 小 问题 。 似 乎 是 这 样 的 ,但 从 网 页 设计 入 手 是 一 个 很 好 的 切入 点 ,至 于 其 他 
部 分 就 要 靠 在 实际 工作 中 积累 了 。 不 过 只 要 自己 按照 规范 做 过 一 次 ,一 般 都 能 够 很 快 
掌握 。 

网 页 设计 的 美术 设计 要 求 与 企业 整体 形象 一 致 。 要 注意 网 页 色彩 、 图 片 的 应 用 及 版 面 
规划 ,保持 网 页 的 整体 一 致 性 。 在 新 技术 的 采用 上 要 考虑 主要 目标 访问 群体 的 分 布地 域 、. 年 
龄 阶层 、 网 络 速度 .阅读 习惯 。 制 定 网 页 改版 计划 ,如 半年 到 一 年 时 间 进 行 较 大 规模 改版 等 。 


(6) 网 站 维护 
主要 包括 几 下 几 点 。 
O 服务 器 及 相关 软 硬 件 的 维护 ,对 可 能 出 现 的 问题 进行 评估 ,制定 响应 时 间 。 
@ 数据 库 维护 ,有 效 地 利用 数据 是 网 站 维护 的 重要 内 容 , 因 此 数据 库 的 维护 要 受到 
视 。 
@ 内 容 的 更 新 、 调 整 等 。 
@ 制定 相关 网 站 维护 的 规定 ,将 网 站 维护 制度 化 ,规范 化 。 
(7) 网 站 测试 
网 站 发 布 前 要 进行 细致 周密 的 测试 ,以 保证 正常 浏览 和 使 用 。 主 要 测试 内 容 包括 以 
下 几 点 。 
D 服务 器 稳定 性 、 安 全 性 。 
@ 程序 及 数据 库 测 试 。 
@ 网 页 兼容 性 测试 ,如 浏览 器 .显示 器 。 
@ 根据 需要 的 其 他 测试 。 
(8) 网 站 发 布 与 推广 
通过 测试 后 就 可 以 发 布 网 站 。 推 广 一 般 是 参加 广告 活动 和 在 搜索 引擎 登记 。 
(9) 网 站 建设 日 程 表 
确定 各 项 规划 任务 的 开始 完成 时 间 负责 人 等 。 
(10) 费用 明细 
制定 各 项 事宜 所 需 费 用 清单 。 


2. 草图 制作 


EN 
E 


网 页 草图 顾名思义 就 是 网 页 真正 实现 之 前 所 画 的 效果 图 。 想 象 中 的 效果 毕竟 和 现实 
中 的 有 所 差异 , 画 出 草图 能 够 验证 构思 是 否 可 行 。 画 草图 当然 可 以 用 传统 的 纸 和 笔画 ,但 
这 里 强烈 推荐 读者 用 绘图 软件 画 网 页 草图 。 因 为 从 某 种 意义 上 说 ,用 绘图 软件 画 草图 的 
过 程 实际 上 就 是 在 制作 网 页 的 过 程 。 在 制作 草图 的 时 候 , 可 以 同时 编辑 以 后 会 用 到 的 网 
页 素材 ,Fireworks 和 Photoshop 甚至 可 以 将 草图 直接 导出 成 为 网 页 。 更 重要 的 是 ,绘图 
软件 本 身 就 提供 丰富 多 彩 的 效果 , 画 出 来 的 草图 也 许 比 头脑 中 所 想 的 还 要 好 。 所 以 在 制 
作 网 页 前 先 画 出 草图 是 一 个 非常 好 的 习惯 。 

基于 本 案例 的 需求 分 析 , 这 里 倾向 使 用 明快 大 方 的 颜色 ,以 配合 青少年 群体 的 审美 。 
但 作为 科技 类 新 闻 网 站 ,色调 也 不 能 过 于 活泼 ,以 免 给 人 轻浮 的 感觉 。 图 9-9 就 是 本 案例 
的 设计 草图 。 

关键 参数 说 明 如 下 。 

O 画布 大 小 : 1024 X768px。 

@ 背景 渐变 色 : M# ccccff 过 渡 到 白色 。 

© 顶端 标题 栏 颜色 : JX # 8585bd 过 渡 到 #a6a6dd。 

@ 顶端 标题 栏 标题 (IT TODAY): Arial Black 字体 ,白色 ,大 小 是 59 磅 ,添加 阴影 
滤 镜 。 
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图 9-9 首页 效果 图 


© 导航 条 背景 色 : M # aca899 过 渡 到 #8989b6 。 
@ 文章 标题 : 宋体 ,颜色 是 #434367, 大 小 是 25 磅 。 


3. 首页 制作 
根据 设计 草图 ,对 首页 布局 如 图 9-10 所 示 。 
pal 
headbar 
content 
ending 


图 9-10 首页 布局 


采用 DIV 十 CSS 实现 上 述 布局 ,XHTML 代码 如 图 9-11 所 示 。 


seers w — j — = w vw 


SOE Untitled-1* 
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<titleonme </title> 


<div id="container"> 
<div id="pal"></div> 
<div id="headbar"></div> 
<div id="content"></div> 
<div id="ending"></div> 


图 9-11 首页 布局 DIV 结构 


为 实现 布局 设计 的 CSS 规则 如 下 : 


<style> 

# container{ width:1000px;} 

# pal{width:100% ; } 

# headbar{ width:100% ; } 

# content { width:100% ;} 

# ending (width:100 % ; } 

</style> 

首页 基本 布局 完成 后 可 以 根据 提供 的 素材 ,逐一 完成 各 个 层 的 内 容 。id 为 content 
的 div 是 主 内 容 区 ,可 以 用 div 再 作 一 个 局 部 布局 。 具 体 的 方法 和 套路 与 整体 布局 类 似 ， 
这 里 就 不 再 重复 了 ,读者 可 以 根据 素材 自行 完成 。 


4. 模板 应 用 


做 一 个 网 站 不 但 要 会 做 ,还 要 高 效率 地 完成 ,完成 后 还 必须 方便 以 后 更 新 改版 。 模 板 
就 是 相当 好 的 工具 。 在 首页 的 设计 方案 中 ,除了 content 层 外 ,其 他 层 在 后 续 的 二 级 和 三 
级 网 页 都 没有 变化 。 那 么 可 以 考虑 将 首页 转 成 模板 ,content 层 里 面 设置 一 个 可 编辑 区 域 
留待 后 续 编 辑 更 改 。 在 Dreamweaver 中 可 以 将 做 好 的 首页 另存 为 模板 (. dwt) 。 建 立 好 
可 编辑 区 域 后 ,保存 当前 模板 。 在 Dreamweaver 打开 “文件 ”面板 (如 果 在 右边 的 面板 组 
找 不 到 ,可 查看 “窗口 "菜单 ,将 “文件 ”面板 打开 ) ,切换 到 “资源 ” 选 项 卡 ,选择 “模板 ”选项 ， 
如 图 9-12 所 示 。 其 中 列 出 了 当前 网 站 已 有 的 模板 。 


图 9-12 网 站 已 有 模板 


右 击 选择 “从 母 版 新 建 " 选 项 立即 可 以 得 到 一 个 和 首页 一 模 一 样 的 网 页 。 改 动 新 网 页 
的 可 编辑 区 域 就 可 以 得 到 二 级 网 页 ,如 图 9-13 所 示 。 


IT Today - Microsoft Internet Explorer 
文件 到 MID EEV HRO IAV EHW 


O=- @ - l [2 @ P uz krm @ @- 2 1 - £ Ë Jes a 


PRP) (Æ) CTnetpabwwwreetvehepterl3Vsaftware htnl s Ens s= s B er 


IT TODAY 


IT 资讯 一 网 打 尽 


图 9-13 二 级 网 页 
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用 制作 首页 模板 的 方法 ,可 以 将 二 级 网 页 转 成 二 级 网 页 模板 ,并 将 每 一 行 的 文章 标题 
设置 成 可 编辑 区 域 。 通 过 二 级 网 页 的 模板 ,可 以 很 快 生成 其 他 二 级 网 页 。 

重复 上 面 的 操作 ,能 很 快 得 出 三 级 网 页 的 模板 ,如 图 9-14 所 示 , 并 按 需 要 生成 文章 网 
页 。 到 目前 为 止 网 站 已 经 基本 实现 。 
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图 9-14 三 级 网 页 模板 


5. 网 站 测试 


网 站 开发 完毕 后 ,还 要 测试 该 网 站 是 否 存 在 重大 问题 。 测 试 一 般 包括 可 用 性 测试 、 兼 
容 性 测试 ,安全 性 测试 、 性 能 测试 等 常见 测试 项 。 

可 用 性 测试 主要 检查 网 站 是 否 存 在 没有 完善 的 地 方 , 如 链接 是 否 可 用 、 图 片 是 否 能 正 
常 显 示 等 。 兼 容 性 测试 主要 用 来 测试 网 站 在 不 同 浏览 器 中 是 否 表现 一 致 。 本 案例 网 站 用 
IE, Firefox 和 Chrome 测试 过 ,效果 基本 一 致 。 安 全 测试 一 般 在 动态 网 站 考虑 比较 多 ,前 
端 网 页 一 般 不 会 出 现 致命 的 安全 漏洞 。 在 网 站 上 传 到 服务 器 后 ,可 以 测试 网 站 的 加 载 速 
度 ,看 是 否 可 以 接受 。 如 果 加 载 太 慢 ,可 以 适当 压缩 图 片 等 多 媒体 素材 和 优化 JavaScript 
代码 ,以 加 快 网 站 加 载 的 速度 。 

经 过 上 述 的 测试 工序 ,网 站 已 经 可 以 上 线 运 行 。 


O | xnTML+css 网 页 设计 与 制作 实例 教程 ] RE 


943 推广 和 运 维 


案例 网 站 上 线 运 行 后 需要 制订 相应 的 推广 计划 。 推 广 可 分 线 上 和 线 下 两 个 维度 进 

行 。 线 上 推广 可 以 找 同 类 的 网 站 打 广 告 。 还 有 更 重要 的 一 步 是 提交 到 搜索 引擎 。 以 提交 

到 百度 为 例 。 假设 网 站 已 经 申请 了 域名 ,并 且 能 够 通过 域名 访问 网 站 。 那 么 可 以 在 浏览 
器 打开 这 个 链接 http://zhanzhang. baidu. com/sitesubmit/index, 如 图 9-15 所 示 。 
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图 9-15 向 百度 提交 站 点 


在 该 网 页 填 人 网 站 的 域名 ,搜索 引擎 就 会 索引 站 点 ,用户 就 可 以 通过 百度 搜索 访问 网 
站 了 。 除 了 上 述 的 推广 手段 ,也 可 以 结合 当前 流行 的 移动 互联 网 推广 ,如 微 博 、 微 信 等 平 
人 台 , 往 往 能 收 到 奇效 。 

线 下 推广 就 是 利用 传统 的 推广 方法 ,如 电视 广告 .平面 媒体 广告 传单、 户外 广告 等 ， 
这 里 就 不 一 一 叙述 了 。 


简 答 题 


. 网 站 规划 书 应 该 包括 哪些 主要 内 容 ? 
. 在 制作 网 页 前 为 什么 要 画 网 页 草图 ? 
. 列举 搜索 引擎 优化 的 技巧 。 
. 简 述 你 对 网 站 项 目的 理解 。 


入 一 


自主 训练 


拟定 一 个 主题 ,围绕 该 主题 写 一 份 网 站 规划 书 ,设计 并 制作 相应 的 网 站 。 
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